我有一个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，内部循环遍历位置数组并将数据推送到两个不同的数据集对象中......
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
});
}
你的问题中有几个方面不太清楚你在寻找什么，但你似乎走在了正确的轨道上。
我认为你未能解决的主要原因是你有可能不完整的数据集，因此当你设置标签来应对多个数据集时，这会使图片变得复杂。改善此问题的一种方法是抓住存在间隙的区域，并将数据置于零值。
您想要提取位置和唯一时间戳是正确的，然后这些独特的时间戳会成为您的主标签列表，您可以根据需要比较不完整的数据并填写。
从那里只需循环数据并设置结构以传递给您的图表功能。
您不确定的循环部分可以像这样完成：
locations.forEach(function(location)
{
var labels = [];
var oos = [];
obj.forEach(function(report)
{
if(report.GRP === location)
{
oos.push(report.LOCATIONOOS)
labels.push(report.DT);
}
});
然后有必要将缺失的覆盖值附加到数据中。虽然您可能希望以不同方式对待它们，但我将它们设置为零。