Javascript 如何动态呈现和更新chart.js折线图

我正在从服务器接收json格式的数据，格式类似于：

{"id":"1","temp1":"22","temp2":"33","hum":"55", "date":"02-08-2020"}, 
{"id":"2","temp1":"33","temp2":"44","hum":"44", "date":"02-08-2020"}, 
{"id":"3","temp1":"12","temp2":"25","hum":"66", "date":"02-08-2020"}

但问题是，它是少数可能的数据集之一。收到的数据可以在“id”和“date”之间有任意数量的字段，所以我想动态创建并呈现我的chart.js折线图

我尝试模拟服务器响应并测试我的逻辑，看看它是否有效。以下是我的全局变量：

var data = [];
var jsonString = '[{"id":"1","temp1":"22","temp2":"33","hum":"55"},{"id":"2","temp1":"33","temp2":"44","hum":"44"},{"id":"3","temp1":"12","temp2":"25","hum":"66"}]';
var myData = JSON.parse(jsonString);

//chart.js config arrays
var graphColors = [
  '#0275d8',
  '#d9534f',
  '#5cb85c',
  '#f0ad4e',
  '#5bc0de'
];

var graphDatasets = [];

我有一个名为init的函数，它在窗口加载时立即被调用：

window.onload=init();

在这个函数中，我提取数据并将其排序到带有key:value的“data”数组中，这样每个从带有key的“myData”对象接收到的对象的属性都映射到数组中的该key下，这样我就有了这样的结果（尽管我不确定这是否是最好的方法）：

在这个init函数中，我还准备了graphDatasets数组，以便能够将其传递给chart.js的“datasets”属性

这是我的初始化函数：

function init() {
      var temp = [];
      myData.slice(-2).forEach(o => Object.entries(o).forEach(([k, v]) => {
          if (!temp[k]) data.push({ [k]: temp[k] = [] });
          temp[k].push(v);
      }));
      //Populate graphDatasets array
      var i = 0;
      for(var key in data) {
        if ((key !== "id") || (key !== "date") ) {
          graphDatasets.push({
            label: key,
            lineTension: 0.3,
            backgroundColor: "rgba(78, 115, 223, 0.05)",
            borderColor: graphColors[i],
            pointRadius: 3,
            pointBackgroundColor: graphColors[i],
            pointBorderColor: "rgba(78, 115, 223, 1)",
            pointHoverRadius: 3,
            pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
            pointHoverBorderColor: "rgba(78, 115, 223, 1)",
            pointHitRadius: 10,
            pointBorderWidth: 2,
            data: data[key]
          });
          i++;
        }
      }
    }

我试图检查收到的密钥是否不是“id”或“date”，因为我不想用图形表示它们，但检查似乎不起作用。我做错了什么，如何解决此问题并正确检查“id”和“日期”字段

之后，我尝试渲染图表，但没有成功：

// Chart Example
var ctx = document.getElementById("chartIndex");
var chartIndex = new Chart(ctx, {
  type: 'line',
  data: {
    labels: data[0].id,
    datasets: graphDatasets
  }

我认为我试图将数据传递到图表中的做法完全错误。 但由于我一般不熟悉javascript，我不知道如何正确处理这种情况，在这种情况下，我有JSON格式的数据，可以改变它的结构，并且，无论有多少数据和它们的键是什么，它们都需要显示在图表上

如何正确地做到这一点，以及我需要在代码和方法中进行哪些修复，以实现基于json响应的动态数据图表

我在这里准备了一把小提琴：

---

我对你的例子做了一些分析-我不确定你期望得到的结果是否。。。通常，您将数据对象构建为地图列表，其中地图中的键是您的动态属性，我将其更改为对象列表：

/*var base_url=$（'head base'）.attr（'href'）*/
//chart.js配置数组
变量图形颜色=[
"0275d8",，
"d9534f",，
"5cb85c",，
"f0ad4e",，
#5bc0de"
];
变量graphDatasets=[]；
常量编号_格式=（a）=>a；
//设置新的默认字体系列和字体颜色以模拟引导的默认样式
Chart.defaults.global.defaultFontFamily='Nunito'，'-苹果系统，系统用户界面，BlinkMacSystemFont，“Segoe用户界面”，Roboto，“Helvetica Neue”，Arial，无衬线字体'；
Chart.defaults.global.defaultFontColor='#858796'；
var数据=[]；
window.onload=init（）；
函数init（）{
var jsonString='[{id:“1”，“temp1:“22”，“temp2:“33”，“hum:“55”}，{id:“2”，“temp1:“33”，“temp2:“44”，“hum:“44”}，{id:“3”，“temp1:“12”，“temp2:“25”，“hum:“66”}'；
var myData=JSON.parse（jsonString）；
var-temp=[]；
myData.slice（-2）.forEach（o=>Object.entries（o）.forEach（[k，v]）=>{
如果（！temp[k]）data.push({
数据：温度[k]=[]，
关键字：k
});
温度[k]。推力（v）；
}));
//填充graphDatasets数组
var i=0；
data.forEach（（elem）=>{
如果（（elem.key！=“id”）&&（elem.key！=“date”））{
graphDatasets.push({
标签：elem.key，
线张力：0.3，
背景色：“rgba（781152230.05）”，
边框颜色：图形颜色[i]，
点半径：3，
pointBackgroundColor:GraphColor[i]，
pointBorderColor:“rgba（781152231）”，
点半径：3，
pointHoverBackgroundColor:“rgba（781152231）”，
pointHoverBorderColor:“rgba（781152231）”，
点半径：10，
点边界宽度：2，
数据：elem.data
});
i++；
}
})
}
//console.log（数据[0]）；
//console.log（图形数据集）；
//面积图示例
var ctx=document.getElementById（“chartIndex”）；
var chartIndex=新图表（ctx{
键入：“行”，
数据：{
标签：数据[0]。id，
数据集：图形数据集
},
选项：{
MaintaintAspectRatio:false，
布局：{
填充：{
左:10,，
右:25,，
前25名，
底部：0
}
},
比例：{
xAxes：[{
时间：{
单位：日期
},
网格线：{
显示：假，
抽边线：假
},
滴答声：{
马克斯：7
}
}],
雅克斯：[{
滴答声：{
马克斯：5，
填充：10，
//在刻度中包括一个美元符号
回调：函数（值、索引、值）{
返回“$”+数字_格式（值）；
}
},
网格线：{
颜色：“rgb（234236244）”，
zeroLineColor:“rgb（234236244）”，
抽边线：假，
borderDash:[2]，
zeroLineBorderDash:[2]
}
}],
},
图例：{
显示：假
},
工具提示：{
背景颜色：“rgb（255255）”，
bodyFontColor:#858796“，
标题：10，
标题字体颜色：“#6e707e”，
标题字体：14，
边框颜色：“#dddfeb”，
边框宽度：1，
加上：15，
加上：15，
显示颜色：假，
交集：错，
模式：“索引”，
护理添加：10，
回调：{
标签：函数（工具提示项、图表）{
var datasetLabel=chart.datasets[tooltipItem.datasetIndex].label | |“”；
返回datasetLabel+'：$'+number_格式（tooltipItem.yLabel）；
}
}
}
}
});
var updateChart=函数（）{
$.ajax({
键入：“GET”，
url:base_url+'/'，
数据类型：“json”，
成功：功能（响应）{
var obj=response.parse（）；
var i=0；
Object.keys（obj）.forEach（函数（键，索引）{
if（data.hasOwnProperty（key））{
data.key.push（obj[key]）；
chartIndex.data.labels.push（对象日期）；
chartIndex.data.datasets[i].data.push（data.key）；
i++；
}
});
//重新渲染图表
myChart.update（）；
}
});
};
//g
// Chart Example
var ctx = document.getElementById("chartIndex");
var chartIndex = new Chart(ctx, {
  type: 'line',
  data: {
    labels: data[0].id,
    datasets: graphDatasets
  }