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

wuchangjian2021-11-04 23:37:19编程学习

  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

相关文章

为什么企业喜欢使用拨号vps服务器

 拨号vps服务器是一种通过虚拟化技术将一台服务器分割成多个虚拟机,每台虚...

【leetcode】题解 88. 合并两个有序数组

题目链接 力扣https://leetcode-cn.com/problems/mer...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。