使用chart.js生成图表

Du_wood 分享于

2020腾讯云双十一活动，全年最低！！！（领取3500元代金券），
地址：https://cloud.tencent.com/act/cps/redirect?redirect=1073

2020阿里云最低价产品入口，含代金券(新老用户有优惠)，
地址：https://www.aliyun.com/minisite/goods

推荐：JS组件系列——开源免费图表组件：Chart.js
前言：最近被开源免费得有点上火了，各种组件首先想到的就是是开源否、是否免费、是否和bootstrap风格一致。想着以后做报表肯定要用到图表组件的，于是在Bootstr

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

然后，我们定义一个画布，作为图表的容器： <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轴使用了时间刻度，如果你有此需求，可参考上述方式，详细的请查询官方文档。

推荐：Highcharts js图表使用
资料 Highcharts官方网址： http://www.highcharts.com/ Highcharts官方文档网址：http://www.highcharts.com/demo/ 线性图表基础实例参数说明 var chart;$(do

chart.js是一个开源的用于生成图表的js库，支持柱形图、曲线图、折线图、散点图、极地图、雷达图、环形图和饼图，可以在一张图里定义一个或两个y轴单位，也可以在一张图里同时出现柱形图和

使用chart.js生成图表

相关阅读排行

相关内容推荐

最新文章

请激活账号

ITKeyword

阿里云&腾讯云双十一活动