bootstrap 插件 Chart.js 图表库_柱状图(bar)

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

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/

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

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号