当前位置:首页 » JavaScript技术

使用chart.js生成图表

2018-05-26 08:21 本站整理 浏览(18)

    chart.js是一个开源的用于生成图表的js库,支持柱形图、曲线图、折线图、散点图、极地图、雷达图、环形图和饼图,可以在一张图里定义一个或两个y轴单位,也可以在一张图里同时出现柱形图和折线/曲线图,它对时间单位的支持也不错,如果x轴是时间单位,它可以灵活展现各种时间日期格式,并灵活设置单位长度。下面我将通过几个例子说明一下chart.js的使用过程:

 

官方文档:http://www.chartjs.org/docs/latest/

 

chart.js使用起来很方便,我们可以很容易地将它集成进我们的项目中。

首先,下载js库,并引入到我们的项目:

官网中提供了各种下载方式:http://www.chartjs.org/docs/latest/getting-started/installation.html

 

<script src="assets/chart/chart.js/dist/Chart.bundle.js"></script>

 然后,我们定义一个画布,作为图表的容器:

<canvas id="c1"></canvas>

 最后,生成我们的图表:

<script>
var ctx_c1=document.getElementById("c1").getContext("2d");

config_c1={
    type: 'bar',
    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
                }
            }]
        }
    }
};

var c1 = new Chart(ctx_c1, config_c1);

</script>

说明:type:指定图表类型,data:定义数据集和x轴,option:设置图表样式(详细的可以查询官方文档,可以配置的参数有好多好多) 

效果图如下:

 
好了,chart.js的使用基本就是使用上边的模板代码了,下面我讲举几个例子,将业务逻辑和图表联调起来,让它展示我们想要展示的数据:

例子1:(html中定义一个画布的部分就省略了)

 

//概览曲线图
var ctx_c1=document.getElementById("c1").getContext("2d");
var config_c1={
    type: 'bar',
    data:{
        labels:[0,0,0,0,0],
        datasets:[
            {
                type: 'line',
                label:'CPU使用率',
                borderColor: 'rgba(0, 238, 0, 1)',
                fill:false,
                yAxisID: 'y-axis-1',
                data:[0,0,0,0,0]
            },{
                type: 'line',
                label:'RAM使用率',
                borderColor: 'rgba(255, 127, 0, 1)',
                fill:false,
                yAxisID: 'y-axis-1',
                data:[0,0,0,0,0]
            },{
                type: 'line',
                label:'IO使用率',
                borderColor: 'rgba(138, 43, 226, 1)',
                fill:false,
                yAxisID: 'y-axis-1',
                data:[0,0,0,0,0]
            },{
                type: 'line',
                label:'5分钟失败率',
                borderColor: 'rgba(255, 0, 0, 1)',
                fill:false,
                yAxisID: 'y-axis-1',
                data:[0,0,0,0,0]
            },{
                type: 'bar',
                label:'5分钟交易量',
                borderColor: 'rgba(54, 162, 235, 1)',
                backgroundColor: 'rgba(54, 162, 235, 0.8)',
                fill:false,
                yAxisID: 'y-axis-2',
                data:[0,0,0,0,0]
            }
        ]
    },
    options: {
        responsive: true,
        hoverMode: 'index',
        stacked: true,
        title: {
            display: true,
            text: '概览曲线图',
            fontSize:35,
            fontColor: "#000",
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'h:mm a'
                    }
                },
                scaleLabel: {
                    display: false,
                    labelString: '时间(5分钟)'
                }
            }],
            yAxes: [{
                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                display: true,
                position: 'left',
                id: 'y-axis-1',
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: '百分比(%)'
                }
            }, {
                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                display: true,
                position: 'right',
                id: 'y-axis-2',
                // grid line settings
                gridLines: {
                    drawOnChartArea: false, // only want the grid lines for one axis to show up
                },
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: '交易量(笔)'
                }
            }],
            elements: {
                line: {
                    tension: 1, // disables bezier curves
                }
            }
        },
        tooltips: {
            mode: 'index',
            intersect: true
        }
    }

};
var c1 = new Chart(ctx_c1, config_c1);
function reload_c1(iswithpara){
    //1带参,0不带参
    var flag=iswithpara||0
    var para={
        type:'c1',
        sysid:window.sysid,
        flag:flag
    };
    if(flag>0){
        para['from']=$("#time_from_c1").val()
        para['to']=$("#time_to_c1").val()
        para['number']=$("#number_c1").val()
    }
    console.log("config_c1.postdata:")
    console.log(para)
    for(var i=0;i<5;i++){
        config_c1.data.datasets[i].data=[]
    }
    config_c1.data.labels=[]
    $.post('/api/dataset',para,function(result){
        var i=0;
        result.data.reverse();
        console.log("c1_result.data:")
        console.log(result.data)
        for (item in result.data){
            config_c1.data.datasets[0].data[i]=result.data[item].cpu;
            config_c1.data.datasets[1].data[i]=result.data[item].mem;
            config_c1.data.datasets[2].data[i]=result.data[item].io;
            config_c1.data.datasets[3].data[i]=result.data[item].failrate;
            config_c1.data.datasets[4].data[i]=result.data[item].allrate;
            config_c1.data.labels[i]=result.data[item].time;
            i++;
        }
        c1.update();
        console.log("config_c1.data.datasets:")
        console.log(config_c1.data.datasets)
    });
};

说明:本图包含5个维度,且包含曲线图和柱形图,且四个曲线图的数值都是百分比,取值为0-100,而柱形图代表交易量,取值为任意正整数,他们不在一个维度,所以最好的办法是定义两个y轴,分别给它们使用(可通过上边这种方式定义两个y轴),如下效果图。 c1.update()用于更新图表,当数据发生变化时,需要调用update()图表才会更新。上边的代码,当调用reload_c1()函数时,会通过ajax从后台获取数据,然后渲染成我们想要的图表,上边的ajax请求返回值为:

{
	'data': [{
		'allrate': '263',
		'mem': '70',
		'failrate': '4.9430',
		'io': '8',
		'time': '2018-05-23 19:40:00',
		'cpu': '39'
	}, {
		'allrate': '357',
		'mem': '76',
		'failrate': '4.4818',
		'io': '15',
		'time': '2018-05-23 19:35:00',
		'cpu': '27'
	}, {
		'allrate': '437',
		'mem': '56',
		'failrate': '3.2037',
		'io': '17',
		'time': '2018-05-23 19:30:00',
		'cpu': '44'
	}, {
		'allrate': '225',
		'mem': '58',
		'failrate': '2.6667',
		'io': '2',
		'time': '2018-05-23 19:25:00',
		'cpu': '48'
	}, {
		'allrate': '203',
		'mem': '57',
		'failrate': '0.9852',
		'io': '1',
		'time': '2018-05-23 19:20:00',
		'cpu': '38'
	}, {
		'allrate': '483',
		'mem': '54',
		'failrate': '2.6915',
		'io': '1',
		'time': '2018-05-23 19:15:00',
		'cpu': '20'
	}, {
		'allrate': '470',
		'mem': '53',
		'failrate': '2.3404',
		'io': '2',
		'time': '2018-05-23 19:10:00',
		'cpu': '24'
	}, {
		'allrate': '331',
		'mem': '52',
		'failrate': '0.6042',
		'io': '3',
		'time': '2018-05-23 19:05:00',
		'cpu': '41'
	}, {
		'allrate': '226',
		'mem': '53',
		'failrate': '5.3097',
		'io': '5',
		'time': '2018-05-23 19:00:00',
		'cpu': '26'
	}, {
		'allrate': '494',
		'mem': '66',
		'failrate': '3.4413',
		'io': '6',
		'time': '2018-05-23 18:55:00',
		'cpu': '38'
	}, {
		'allrate': '386',
		'mem': '73',
		'failrate': '3.1088',
		'io': '14',
		'time': '2018-05-23 18:50:00',
		'cpu': '26'
	}, {
		'allrate': '241',
		'mem': '50',
		'failrate': '1.6598',
		'io': '4',
		'time': '2018-05-23 18:45:00',
		'cpu': '35'
	}, {
		'allrate': '313',
		'mem': '60',
		'failrate': '0.3195',
		'io': '5',
		'time': '2018-05-23 18:40:00',
		'cpu': '30'
	}, {
		'allrate': '306',
		'mem': '80',
		'failrate': '2.2876',
		'io': '4',
		'time': '2018-05-23 18:35:00',
		'cpu': '50'
	}, {
		'allrate': '210',
		'mem': '66',
		'failrate': '2.8571',
		'io': '14',
		'time': '2018-05-23 18:30:00',
		'cpu': '23'
	}, {
		'allrate': '420',
		'mem': '50',
		'failrate': '1.6667',
		'io': '9',
		'time': '2018-05-23 18:25:00',
		'cpu': '48'
	}, {
		'allrate': '325',
		'mem': '51',
		'failrate': '3.6923',
		'io': '19',
		'time': '2018-05-23 18:20:00',
		'cpu': '49'
	}, {
		'allrate': '269',
		'mem': '63',
		'failrate': '1.1152',
		'io': '18',
		'time': '2018-05-23 18:15:00',
		'cpu': '41'
	}, {
		'allrate': '250',
		'mem': '55',
		'failrate': '0.0000',
		'io': '14',
		'time': '2018-05-23 18:10:00',
		'cpu': '26'
	}, {
		'allrate': '418',
		'mem': '76',
		'failrate': '2.6316',
		'io': '1',
		'time': '2018-05-23 18:05:00',
		'cpu': '41'
	}]
}

 

 

注:此类既包含曲线图又包含柱形图的,一定要将config_c1.type定义为‘bar’,如果定为‘line’会不生效。

 

效果:
 

 

例子2:

 

//饼状图(成功数,a类失败数,b类失败数...)
var ctx_c2=document.getElementById("c2").getContext("2d");
var config_c2 = {
    type: 'pie',
    data: {
        datasets: [{
            data: [],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.green
            ],
            label: '昨日成功率'
        }],
        labels: [
            '昨日失败数',
            '昨日成功数'
        ]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '昨日成功率',
            fontSize:20,
            fontColor: "#000"
        },
        legend: {
            position: 'top'
        }
    }
};

var c2=new Chart(ctx_c2, config_c2);
function reload_c2(iswithpara){
    //1带参,0不带参
    var flag=iswithpara||0
    var para={
        type:'c2',
        sysid:window.sysid,
        flag:flag
    };
    if(flag>0){
        para['from']=$("#time_from_c2").val()
        para['to']=$("#time_to_c2").val()
        para['number']=$("#number_c2").val()
    }
    console.log("config_c2.postdata:")
    console.log(para)
    $.post('/api/dataset',para,function(result){
        console.log("c2_result.data:");
        console.log(result.data[0].failnum+"||"+result.data[0].succnum);
        config_c2.data.datasets[0].data=[];
        config_c2.data.datasets[0].data.push(result.data[0].failnum);
        config_c2.data.datasets[0].data.push(result.data[0].succnum);
        c2.update();
        console.log("config_c2.data.datasets:");
        console.log(config_c2.data.datasets);
    });
}

说明: 该ajax返回:

{
	'data': [{
		'succnum': '43650',
		'failnum': '1350',
		'time': '2018-05-24 22:44:23'
	}]
}

 

 

效果图:

 

 

例子1中的x轴使用了时间刻度,如果你有此需求,可参考上述方式,详细的请查询官方文档。