一段简单的JavaScript代码，实现在同一网页输出多个图标的功能

先看效果：

源代码：

<html>
<style>#myChart1, #myChart2,#myChart3,#myChart4,#myChart5,#myChart6,
#barChart1, #barChart2,#barChart3,#barChart4,#barChart5,#barChart6{display: inline !important;
}</style>
<body id="body" onload="loaded()">
<div>
<canvas id="myChart1" height="400px"></canvas>
<canvas id="myChart2" height="400px"></canvas>
<canvas id="myChart3" height="400px"></canvas>
<canvas id="myChart4" height="400px"></canvas>
<canvas id="myChart5" height="400px"></canvas>
<canvas id="myChart6" height="400px"></canvas>
</div><div>
<canvas id="barChart1" height="400px"></canvas>
<canvas id="barChart2" height="400px"></canvas>
<canvas id="barChart3" height="400px"></canvas>
<canvas id="barChart4" height="400px"></canvas>
<canvas id="barChart5" height="400px"></canvas>
<canvas id="barChart6" height="400px"></canvas>
</div></body><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script><script>function getBodyNode(){return document.getElementById("body");
}function loaded(){var totalWidth = getBodyNode().clientWidth;console.log("width in load: " + totalWidth);var aCharts = document.getElementsByTagName("canvas");for( var i = 0; i < aCharts.length; i++){aCharts[i].width = totalWidth / 6.5;}var option = {tooltips: {enabled:false},type: "pie",xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],yAxisData: [12, 19, 3, 5, 2, 3],yAxisLabel: "Number of Votes"};for( var i = 1; i <= 6; i++ ){createChartOnCanvas("myChart" + i, option);}option.type = "bar";for( var i = 1; i <= 6; i++ ){createChartOnCanvas("barChart" + i, option);}
}/*{type: pie,xAxisData: [],yAxisData: [],yAxisLabel: '# of Votes'}
*/
function createChartOnCanvas(canvasId, oChartOption){var ctx = document.getElementById(canvasId).getContext('2d');var myChart = new Chart(ctx, {type: oChartOption.type,data: {labels: oChartOption.xAxisData,datasets: [{label: oChartOption.yAxisLabel,data: oChartOption.yAxisData,backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],borderWidth: 1}]},options: {responsive: false,scales: {yAxes: [{ticks: {beginAtZero:true}}]}}});
}
</script></html>

一段简单的JavaScript代码，实现在同一网页输出多个图标的功能相关推荐

100转换成二进制 java,一段简单的java代码，十进制转二进制
一段简单的java代码,十进制转二进制 mip版关注:188 答案:5 悬赏:40 解决时间 2021-01-23 23:14 已解决 2021-01-23 05:43 代码如下,希望可以帮我 ...
一段简单的python代码_Python趣味打怪：60秒学会一个例子，147段简单代码助你从入门到大师 | 中文资源...
鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 人生苦短,编程苦手,不妨学起Python,感受一飞冲天的快乐. 不要害怕学习的过程枯燥无味,这里有程序员jackzhenguo打造的一份中文 ...
一串最简单的JavaScript代码，在Chrome开发者工具调试器里触发VM8标签的出现
代码如下: <html> <script>var code = "{ /* Jerry test generation */; debugger; console.l ...
一段简单的打印代码(c#)
代码 1 //数据流 2 System.IO.StringReader sr; 3 //要打印的字符串 4 private void redstr() 5 ...
一段简单的python代码_一个简单的python写的C/S程序
前段时间闲来无聊,打算学习下python,看了半个月的书,貌似啥都没学会.有个朋友让说,让我帮他写个批量管理linux服务器的程序,我一想就用python来写吧,于是看了下书,然后修修改改,一个soc ...
在页面中直接嵌入JavaScript代码
一 <script>标记在HTML文档中通过使用<script></script>标记将JavaScript脚本嵌入到其中,在HTML文档中可以使用多个<s ...
移动网站开发中常用的10段JavaScript代码
在开发移动网站过程中,有一些Javascript代码会经常用到.以下是10段常用的JavaScript代码.需要注意的是某几段代码需要jQuery mobile framework支持. 1.如果网页 ...
easyui treegrid 获取新添加行inserted_18行JavaScript代码构建一个倒数计时器
有时候,你会需要构建一个JavaScript倒计时时钟.你可能会有一个活动.一个销售.一个促销或一个游戏.你可以用原生的JavaScript构建一个时钟,而不是去找一个插件.尽管有很多很棒的时钟插件, ...
前端JavaScript代码混淆加密原理介绍
因为JavaScript大都是运行在浏览器端,这就导致任何人都可以直接对网站的代码进行查看,如果代码没有进行任何处理就会导致直接暴露源码,他人便可轻而易举的复制你的劳动成果,但是由于没有纯粹的加密方案 ...

一段简单的JavaScript代码，实现在同一网页输出多个图标的功能

一段简单的JavaScript代码，实现在同一网页输出多个图标的功能相关推荐

最新文章

热门文章