javascript - Chart.JS 多线图,来自 JSON 的行数未知
问题描述
我尝试使用 chart.js 制作多折线图。我有一个来自数据库的 json 数据集。数据集的数量可以不同。这是一个带有 JSON 数据的示例(x 可以更多)。
[{"name":"name1","jan":4067.5,"feb":1647,
"mrz":1375,"apr":10191,"mai":0,"jun":28679,"jul":59502},
{"name":"name2","jan":47548,"feb":63280.5,
"mrz":51640.26,"apr":75029,"mai":41137,"jun":89114.26,"jul":77332},
{"name":"name3","jan":38099,"feb":55023.5,
"mrz":62668,"apr":39482,"mai":44193.3,"jun":52826.5,"jul":77072},
{"name":"namex","jan":34930.5,"feb":36831.5,
"mrz":24391,"apr":35051,"mai":38038,"jun":12700,"jul":51080}]
我已经简化了这个例子,实际上直到 12 月。
我尝试为每个名称制作一个带有线条的图表。X 轴应该是 1 月到 12 月的月份,Y 轴应该是销售额。
34/5000
解决方案
据我了解,您的数据集将动态更新。
您可以更改数据集,然后调用该update()
函数。
例如:
首先使用以下所有数据初始化图表:
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "name 1",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, ,60,55,30,78]
}, {
label: "name 2",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
然后,如果您以后想要更新数据,您可以:
myBarChart.data.datasets = [{
label: "name 3",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
},
...............
];
myBarChart.update();
此外,您需要以可与图表一起使用的方式格式化数据。格式化您的数据,以便您可以创建适当的数据集。
推荐阅读
- haskell - 如何为具有不同构造函数 Haskell 的类型实例化 Eq(或任何类)
- javascript - 如何从对象数组中获取唯一的类别数据
- java - Java上字符串添加的奇怪行为
- c++ - c++ 中有没有办法使用点运算符而不是 -> 来表示 pSomePointer->pValue->nSubvalue
- go - 如何在 golang 中实例化函数类型?
- laravel - 无法使用带有 Laravel 5.4 的 sendgrid 发送电子邮件并发现错误
- c# - 以低角度旋转图像并清晰保存(C#)
- google-maps - 如何使用下拉菜单在谷歌地图上设置标记?
- ios - IOS 媒体播放器 - 跳到特定时间
- laravel - Laravel 队列超时问题