bootstrap 插件 Chart.js 图表库_柱状图(bar)
发布时间:2019-08-22 编辑:小张个人博客 查看次数:5711
Chart.js 带有内置图表类型:
线
条形图
雷达
甜甜圈和馅饼
极地区
气泡
分散
GitHub:https://github.com/chartjs/Chart.js
Chart.js 文档:https://www.chartjs.org/docs/latest/charts/
安装
可以通过 NPM 或 BoWER 安装。建议用这种方式得到 Chart.js。
// bower install chart.js --save npm install chart.js --save
用法
Chart.js 可以与 ES6 模块、普通 JavaScript 和模块加载器一起使用。
创建图表
从 Chart.js 开始很容易。所有需要的是包含在页面中的脚本和一个单独的脚本。<canvas>节点来绘制图表
在这个示例中,我们为单个数据集创建条形图,并在页面中呈现该图表。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Chart.js 最新版本使用案例</title> <link href="https://cdn.bootcss.com/Chart.js/2.8.0/Chart.css" rel="stylesheet"> </head> <body> <div style="width:600px; margin-top: 120px;margin-left:320px;"> <canvas id="myChart" width="600" height="300"></canvas> </div> <script src="https://cdn.bootcss.com/Chart.js/2.8.0/Chart.js"></script> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'polarArea', // 线形图:line、条形图:bar 、雷达图:radar、馅饼和甜甜圈图表:pie、极区面积图:polarArea、汽泡:bubble data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], 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: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); </script> </body> </html>
线形图(line)是一种绘制直线上数据点的方法。通常,它被用来显示趋势数据,或者是两个数据集的比较。
条形图(bar)提供了表示垂直条表示的数据值的方法。它有时用于显示趋势数据,并列比较多个数据集。
雷达图(radar)是一种显示多个数据点和它们之间的差异的方法。它们通常用于比较两个或多个不同数据集的点。
馅饼和甜甜圈图表(pie)可能是最常用的图表。它们被分为段,每个段的弧表示每个数据的比例值。它们很好地显示了数据之间的关系比例。
极区面积图(polarArea)与饼图相似,但每个段具有相同的角度-段的半径根据值不同。当我们想要显示类似于饼图的比较数据时,这种类型的图表通常是有用的,但也显示了上下文的值的比例。
Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1
联系方式:[email protected] | 本站文章仅供学习和参考