當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
一段简单的JavaScript代码，实现在同一网页输出多个图标的功能
生活随笔
收集整理的這篇文章主要介紹了
一段简单的JavaScript代码，实现在同一网页输出多个图标的功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
先看效果：
源代碼：
<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>總結(jié)
以上是生活随笔為你收集整理的一段简单的JavaScript代码，实现在同一网页输出多个图标的功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 迷你世界牛吃什么繁殖
- 下一篇： SAP Analytics Cloud里