bootstrap 插件 Chart.js 图表库_柱状图（bar）

发布时间：2019-08-22 编辑：小张个人博客 查看次数：5711

bootstrap chart图表

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）提供了表示垂直条表示的数据值的方法。它有时用于显示趋势数据，并列比较多个数据集。

条形图（bar）

雷达图（radar）是一种显示多个数据点和它们之间的差异的方法。它们通常用于比较两个或多个不同数据集的点。

雷达图（radar）

馅饼和甜甜圈图表（pie）可能是最常用的图表。它们被分为段，每个段的弧表示每个数据的比例值。它们很好地显示了数据之间的关系比例。

极区面积图（polarArea）与饼图相似，但每个段具有相同的角度-段的半径根据值不同。当我们想要显示类似于饼图的比较数据时，这种类型的图表通常是有用的，但也显示了上下文的值的比例。

极区面积图（polarArea）

出处：小张个人博客

网址：http://blog.023xs.cn/

您的支持是对博主最大的鼓励，感谢您的认真阅读。欢迎转载，但请保留该声明。

上一篇： php_ session_id 限制同一用户同时登录

下一篇： jQuery 插件 jqprint 实现浏览器页面打印和设置页眉页脚

猜您喜欢