使用来自Chart.Js对象的数据用多条线填充JSON线图
使用来自Chart.Js对象的数据用多条线填充JSON线图
提问于 2019-04-15 01:47:48
我有一个JSON对象，我正在尝试使用Chart.Js在折线图上绘制数据。我能够用一个事件成功地做到这一点，但我在绘制覆盖多个地理位置的事件时遇到了麻烦。
[{"DT":"2018-10-10","LOCATIONOOS":0,"GRP":"GEORGIA"},{"DT":"2018-10-10","LOCATIONOOS":6,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-11","LOCATIONOOS":13,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-11","LOCATIONOOS":195,"GRP":"GEORGIA"},{"DT":"2018-10-12","LOCATIONOOS":66,"GRP":"GEORGIA"},{"DT":"2018-10-12","LOCATIONOOS":3,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-13","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-13","LOCATIONOOS":20,"GRP":"GEORGIA"},{"DT":"2018-10-14","LOCATIONOOS":10,"GRP":"GEORGIA"},{"DT":"2018-10-14","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-15","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-15","LOCATIONOOS":5,"GRP":"GEORGIA"},{"DT":"2018-10-16","LOCATIONOOS":2,"GRP":"GEORGIA"},{"DT":"2018-10-17","LOCATIONOOS":2,"GRP":"GEORGIA"}]首先:我从JSON对象中获取唯一的日期作为我的x轴标签：
//get the unique dates from the json obj which will be used as labels on the chart
labels = [];
var labels = [];
for(i = 0; i< obj.length; i++){
if(labels.indexOf(obj[i].DT) === -1){
labels.push(obj[i].DT);
}
}接下来，我将为GRP (位置)做同样的事情。我相信我需要这个数据，因为这将是我想要在我的图表上显示的线条数量：
locations = [];
for(i = 0; i< obj.length; i++){
if(locations.indexOf(obj[i].GRP) === -1){
locations.push(obj[i].GRP);
}
}最后，我必须遍历JSON obj并将数据推送到(在本例中)两个不同的数据集，以绘制图表。这是我模糊不清的部分……我认为我可能需要一个嵌套循环，外部循环遍历JSON obj，内部循环遍历位置数组，并将数据推送到两个不同的datasets对象中……
locationoos = [];
for(i = 0; i< obj.length; i++){
var data = {
labels: labels,
datasets: [{
label: locations[0],
borderColor: "red",
borderWidth: 2,
hoverBackgroundColor: "red",
hoverBorderColor: "red",
data: locationsoos,
fill: false
}]
}
}有谁有这样做的经验吗？
全功能：
function initGraph() {
var labels = [];
var counts = [];
var grp = [];
$.ajax({
type: "GET",
url: "../test/cfc/test.cfc",
cache: false,
async: false,
data: { method: "getChartData",
Id: 29,
},
success: function(output) {
json = output;
obj = JSON.parse(json);
},
error: function(httpRequest, textStatus, errorThrown) {
alert("initGraph status=" + textStatus + ",error=" + errorThrown);
}
});
//get the unique dates from the json obj which will be used as labels on the chart
var labels = [];
for(i = 0; i< obj.length; i++){
if(labels.indexOf(obj[i].DT) === -1){
labels.push(obj[i].DT);
}
}
//select the unique market clusters
var locations = [];
for(i = 0; i< obj.length; i++){
if(locations.indexOf(obj[i].GRP) === -1){
locations.push(obj[i].GRP);
}
}
locationsoos=[]
//loop over obj.length
for(i = 0; i< obj.length; i++){
//loop over locations array
for(j = 0; j< locations.length; j++){
var data = {
labels: labels,
datasets: [{
label: locations[0],
//backgroundColor: "",
borderColor: "red",
borderWidth: 2,
hoverBackgroundColor: "red",
hoverBorderColor: "red",
data: locationsoos,
fill: false
}]
}
}
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0
}
}]
},
title: {
display: true,
text: 'Locations OOS vs Time',
fontStyle: 'bold',
fontColor: 'blue',
position: 'top',
fontSize: 14
}
};
Chart.Line('mobGraph', {
data: data,
options: options
});
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-15 04:41:05
在你的问题中，有几个领域你不太清楚你在寻找什么，但你似乎走在了正确的道路上。
我认为你失败的主要原因是你有潜在的不完整的数据集，因此当你设置标签来处理多个数据集时，情况会变得复杂。改善这个问题的一种方法是抓住有差距的区域，并将数据放入零值。
您希望提取位置和唯一的时间戳以及这些唯一的时间戳，然后将其作为您的主标签列表，您可以将不完整的数据与之进行比较，并在必要时进行填充，这是正确的。
从那时起，只需循环遍历数据并设置要传递给图表函数的结构。
你不确定的循环部分可以这样做：
locations.forEach(function(location)
{
var labels = [];
var oos = [];
obj.forEach(function(report)
{
if(report.GRP === location)
{
oos.push(report.LOCATIONOOS)
labels.push(report.DT);
}
});然后有必要将缺失的覆盖值附加到数据中。我已经将它们设置为零，尽管您可能希望以不同的方式对待它们。
看看这个working fiddle https://jsfiddle.net/jumpypaula/pgqy1k6d/7/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55678260
复制相关文章
相似问题