[英]How to create a dynamic multi-line chart in chart.js
我想创建一个包含多条线的图形,问题是代码将覆盖它创建的上一条线图,我将x和y轴值作为函数调用传递给代码,逻辑上它应该将x轴设置为一次,然后将数据添加到y(数据集中的数据)轴,以便图形中有多条线
静态代码在折线图中包含多条线
var config =
{
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"], //dates populated
datasets: [{
label: "My First dataset", //Name of reporting employee
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
randomScalingFactor(), //Add Datapoints(overall rating)
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
--------
}, {
label: "My Second dataset",
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}]
},
下面是我的代码,试图对动态传递的数据执行上述工作,动态性质导致了我前面提到的问题,
var config =
{
type: 'line',
data: {
labels:col_dates, //dates populated
datasets: [{
label:Name, //Name of reporting employee
backgroundColor:'#00FFFF',
borderColor: '#00FFFF',
data:O_ratings,
fill: false,
}]
},
options: {
responsive: true,
//animation: false,
title:{
display:true,
text:'Ratings Chart'
},
tooltips: {
mode: 'index', //Populate the entire datalist here
intersect: false,
},
hover: {
mode: 'nearest',
intersect: false
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
我使用了两个数组col_dates(设置为X轴)和O-ratings(设置为Y轴)
因此,我没有足够的声誉积分才能对这个问题进行评论。 尝试删除背景颜色属性。 第一个数据集中的数据可能大于第二个数据集中的数据。 我最近使用php完成了动态多折线图。 我的图表配置如下:
var lineChartData = { //chart config options
labels : [<?php echo '"'.$labelArray.'"'; ?>],
datasets : [<?php echo $dataString; ?>],
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type:"line",
fill: false,
data:lineChartData,
options: {
scales: {
xAxes: [{
ticks: {
autoSkip : true,
min: 2,
maxTicksLimit: 10
}
}]
},
},
responsive:true
});
$dataString
是变量,我在其中传递从外部URL检索的所有数据
$dataString = $dataString."{label : '$name','fill' : 'false', data : [$br_values], borderColor : '$color', backgroundColor : 'transparent' },";
让我知道是否有任何遗漏,抱歉,我没有尽快回答这个问题,我在2天前解决了此问题。 有关Chart.js的更多文档,请转到此处
荣誉
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.