javascript - Chart.js 不会显示正常图表

Question

我在使用 Chart.js 时遇到问题。当我将数据放入 Javascript 中时，它可以很好地显示图表。现在我想用 JSON 来准备它。但由于某种原因它的读法是错误的。我按照他们网站上的示例进行操作，它应该向我展示这一点 但我却看到了这个 请注意，前 3 周有相关数据。当我将鼠标悬停在它们上方时，它会向我显示数据。这是 JSON

[{
"label": "Net Comp",
"color": "#F02626",
"data": [520, 600, 850, 900, 300]
},
{
"label": "AnalyzerHR",
"color": "#26F041",
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ]
},
{
"label": "Question Right",
"color": "#20AEFA",
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ]

}]因此，这 3 个数据被打包为数组，并显示在前 3 个标签上。因此，当我将鼠标悬停时，它会向我显示 520, 600, 850, 900, 300 。这是错误的，因为数据中的每个值都应该超过一周。不仅仅是第一周的1个数据。这是我的 JavaScript

$(document).ready(function() {

$.getJSON('data.json', function(data){
    console.log(data);

    var myData = (data);

    Array.prototype.mapProperty = function(property) {
    return this.map(function (obj) {
      return obj[property];
     });
    };
    lineChartData = {
        labels : [["Week 47"],[7,"week 48"], [8,"Week 49"], [9,"Week 50"], [10,"Week 51"], [11,"Week 52"]],
        datasets: [
        {        
        label: "Test",
        fillColor : "rgba(220,220,220,0.2)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : myData.mapProperty("data"),

    }]};
    var ctx = document.getElementById("myLineChart").getContext("2d");
    var myLineChart = new Chart(ctx).Line(lineChartData);

});

});

如何将每个数据值设置为不同的周？我在我的代码中看不到任何错误(我知道有某个地方)。 Chartjs 能够读取 JSON 并显示它，但在错误的位置

提前谢谢

已编辑我找到了问题所在，但找不到解决问题的方法。我做了一些测试，似乎在 Javascript 中 Chartjs 正在将数据读取为 [1,2,3,4,5,6,7]。但是当我调用它时，它会获取所有 3 个对象。当我在数据集中写入类似 data : ChartjsData.data 的内容时，它不会接受

Answer 1

对于遇到同样问题的人，我找到了解决方案。显然它就在我眼前。

我已经改变了

var myData = (data);

Array.prototype.mapProperty = function(property) {
return this.map(function (obj) {
  return obj[property];
});

代码略有不同 ->

var chartjsData = [];
for (var i = 0; i < data.length; i++) {
    chartjsData.push(data[i].data); 
};

但是数据打印不正确的主要原因是我在lineChartData中设置datasets的方式。我只使用了一个数据集。这当然等于 1 个数据。所以我只是在数据集(数据)中添加了所有 3 个 json.data 。每个数据集(数据)为 1 行。所以我一行得到了 3 个响应。所以显而易见的事情是

创建更多数据集(数据)。这是我的解决方案:

datasets: [
    {        
        label: "Test",
        fillColor : "rgba(220,220,220,0.2)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : chartjsData[0]
    },{
        label: "Test2",
        fillColor : "rgba(220,220,220,0.2)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : chartjsData[1]
    },{
        label: "Test3",
        fillColor : "rgba(220,220,220,0.2)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : chartjsData[2]
    }
]

我希望这能帮助一些刚刚开始使用 Chartjs 的人。这是一个很棒的图书馆。