chart.js使用学习—

chart.js支持同时绘制多个数据集的图形。之前介绍chart.js绘图时，无论是一个数据集，还是多个数据集，指定的绘图类型都是相同的。chart.js支持对不同的数据集指定不同的绘图类型，也就是本文介绍的混合图表，即将chart.js支持的不同图表在同一绘图区域中展示。
之前使用chart.js绘图时，绘图类型是在chart对象的构造函数中指定，该类型适用于data中的所有数据集。

 var lineChart = new Chart(ctx, {type: 'line',data: data,});

而作为混合图表，绘图类型是在每个数据集中指定，如下面的代码及图形效果所示：

 const data = {labels: labels,datasets: [{label: '柱状图',type:'bar',data: [65, 59, 80, 81, 56, 55, 40],borderColor: 'rgb(75, 192, 192)',backgroundColor:'rgba(255, 99, 132, 0.5)'},{label: '折线图',type:'line',data: [85, 79, 100, 101, 76, 75, 60],borderColor: 'rgb(175, 92, 92)',backgroundColor:'rgba(153, 102, 255, 0.5)'},              {type:'radar',label: '雷达图',data: [185, 179, 200, 201, 176, 175, 160],borderColor: 'rgb(125, 42, 192)'            }]};var barChart = new Chart(ctx, {data: data});

上述数据集中的数据格式都是同样的一维数据，chart.js也支持不同数据格式的数据集混合在一起显示，如下列代码及效果图所示，此时各个数据集在图表中的绘制顺序由每个数据集的order属性决定。

 const labels = numbers({count: 7});const data = {labels: labels,datasets: [{label: '柱状图',type:'bar',data: [65, 59, 80, 81, 56, 55, 40],borderColor: 'rgb(75, 192, 192)',backgroundColor:'rgba(255, 99, 132, 0.5)'},{label: '折线图',type:'line',data: [85, 79, 100, 101, 76, 75, 60],borderColor: 'rgb(175, 92, 92)',backgroundColor:'rgba(153, 102, 255, 0.5)'},        {type:'bubble',   label: '气泡图数据集',data: [{x: 20,y: 30,r: 15}, {x: 40,y: 10,r: 10},{x: 100,y: 36,r: 5},{x: 80,y: 29,r: 3},{x: 140,y: 110,r: 30}],backgroundColor: 'rgb(255, 99, 132)',pointStyle:'rectRounded',radius:5}]};var barChart = new Chart(ctx, {data: data,options: {         } });

参考文献：
[1]https://www.chartjs.org/docs/latest/charts/mixed.html
[2]https://chartjs.bootcss.com/docs/charts/mixed.html

chart.js使用学习——混合图表相关推荐

数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area--(极地图) 极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异.当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表. ...
chart.js基本知识——调整图表尺寸
<chart.js使用学习 >最后提到测试过程中发现调用chart.js绘制的图表会自动充满父容器.如果canvas直接放在body标签下,则图标会充满整个页面,即便设置canvas的 ...
图表插件 - chart.js (柱状图) 学习总结
chart.js 基于H5的canvas,轻量级的图表插件. 有6中图表类型:折线图.条形图.雷达图.饼图.柱状图.极地区域图关于柱状图的绘制,追加 .更新.删除数据等操作的总结原文来自于:htt ...
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35 ...
统计图表插件Chart.js（前端常用图表）
官方文档:https://chartjs.bootcss.com/docs/ 图表JS: <script src="Chart.js"></script> ...
chart.js使用学习——柱状图（1：基本用法)
柱状图属于以长方形的长度为变量的统计图表[1].chart.js创建图形的方式都类似,先是数据准备,然后在chart构造函数中指定图表类型. 如下列代码及效果图所示,chart类中将类型指定为 ...
chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
chart.js使用学习——折线图（1：基本用法)
折线图,即在直角坐标系中用直线串起来的一系列点形成的图形.在excel.ppt等办公软件中经常见到折线图,应用系统中也有不少统计汇总功能以折线图形式展示.本文根据参考文献1-2学习chart.js ...
chart.js使用学习——散点图
之前介绍折线图时提到过,如果将数据集的showLine设为false,则绘制图形时只会绘制点,不会绘制点与点之间的连线,这其实就是散点图.chart.js中有单独绘制散点图的类型,即scatter ...
chart.js使用学习——雷达图
雷达图以二维形式综合对比多组数据的差异,常用于比较2组或更多组数据集[1].chart.js中雷达图的数据准备与其它图形相同,主要差异在于创建chart对象时,图形类型需指定为"rada ...

chart.js使用学习——混合图表

chart.js使用学习——混合图表相关推荐

最新文章

热门文章