使用来自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
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55678260
复制相关文章
相似问题