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轴使用了时间刻度，如果你有此需求，可参考上述方式，详细的请查询官方文档。
相关推荐
`Canvas`元素作为图表的画布，用于渲染`Chart.js`生成的图表。 2. **数据传递**：将Qt应用中的数据通过JavaScript接口传递到`Chart.js`，可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许...
在ES6（ECMAScript 2015）的支持下，OrgChart.js利用了类(class)、模板字符串、解构赋值等现代JavaScript特性，提供了一种简洁、高效的方式来构建和操作组织图。例如，你可以使用类来定义图表节点，通过模板字符串来...
《Chart.js：简单易用的图表生成库》 Chart.js是一款广受欢迎的开源JavaScript库，专为快速且简便地创建各种图表而设计。其简洁的API使得开发者无需深入复杂的配置，就能轻松实现数据可视化。这款插件对于那些需要...
Chart.js 是一个轻量级的JavaScript库，专用于创建数据可视化图表。它的最新版本2.7.1相较于旧版有了显著的改进和增强，使得它成为开发者构建动态、交互式图表的理想选择。以下是对Chart.js Version 2.7.1及其主要...
Chart.js是一款轻量级的JavaScript库，专门用于创建各种类型的统计图表。这个库以其简单易用、灵活性高和性能优秀而受到开发者的喜爱。在这个"Chart.js演示7种不同的统计图"的资源中，我们可以期待看到Chart.js如何...
例如，你可以通过在HTML模板中添加特定的`<canvas>`元素并指定相应的指令，如`chart-type`和`chart-data`，来生成图表。 ```html <canvas id="myChart" chart-type="line" chart-data="data"> ``` 在这里，`chart-...
在开发过程中，我们经常需要对数据进行可视化展示，这不仅需要图表库能够快速生成图表，还需要我们能够根据需求进行定制化修改。Chart.js 默认提供的图表选项有限，如果想要制作更为绚丽多彩的图表，就需要我们了解...
可以生成各种图表，很全面，也很实用，拿来即用。
import { Line } from 'vue-chartjs' export default { extends: Line, data() { return { chartData: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { label: 'My First ...
**Python-ChartJS库在Django中的应用** Python是一种广泛使用的编程语言，尤其在Web开发领域，Django作为Python的一个强大框架，为开发者提供了高效、安全的网站构建工具。而数据可视化是现代Web应用程序中不可或缺...
chart.js是一款轻量级的JavaScript图表库，适合用于数据可视化。它可以轻松创建各种类型的图表，如柱状图、饼图、线图等。在本项目中，chart.js被用来展示用户性别比例和年龄分布的统计信息。通过JSON数据接口获取...
Chart.js 是一个轻量级且功能强大的JavaScript库，它用于在Web页面上绘制各种类型的图表。这个库基于HTML5的`canvas`元素，因此能够生成高质量、响应式的图表，同时对旧版浏览器（如IE7/8）也提供了良好的支持。...
2. 性能：对于大数据集，生成图表可能会消耗较多资源。选择合适的图表类型，并考虑使用图表库提供的性能优化选项。 3. 定制化：虽然Chart.js默认配置已经很丰富，但为了满足特定的视觉效果，可能需要根据官方文档...
npm install chart.js vue-chartjs ``` 然后，在Vue组件中导入并使用： ```javascript import { Line } from 'vue-chartjs' export default { extends: Line, data() { return { labels: ['January', '...
使用Flowchart.js，你可以将流程图的逻辑写入HTML文档或者在JavaScript代码中动态生成。 以下是一些关于使用Flowchart.js的关键知识点： 1. **安装与引入**：首先，你需要将`flowchart.js`文件引入到你的HTML页面...
`Chart.js` 是一个轻量级的JavaScript库，专用于创建交互式的、基于HTML5 canvas的图表。它以其简洁的API和高效性能在数据可视化领域广受欢迎，尤其适合网页和移动应用的数据展示。本文将深入探讨`Chart.js`的核心...
生成的JS代码具有名称空间，因此不会与其他Chart.js实例中的代码冲突。 在这里更改为PHP的Chart.js 。 它与Chart.js 1.x完全兼容（即将在2.x中更新）。开始使用克隆此存储库，并将src文件夹的内容放在PHP项目中的...
Chart.js是一个轻量级、易于使用的JavaScript库，用于创建各种类型的图表，如条形图、饼图、线图等，这使得在网页上展示数据变得简单直观。 **系统需求** 为了成功地使用SilverStripe Charts，你需要满足以下技术...
由于Node.js主要用于服务器端编程，chartjs-node使得开发者能够在后端生成图表，这对于无头浏览器环境或者自动化报告生成特别有用。在URLtochart中，它负责接收Chart.js处理后的数据，并将它们转化为实际的图像文件...
包装器使用流行的最新Chart.Js库（ ）生成图表。 它还提供用于生成图表的Asp.Net MVC HtmlHelper扩展方法。 可以在找到所有类型图表的样本。 基本折线图 ChartTypeLine LineChart = new ChartTypeLine () { Data...