Chart.js不会显示正常的图表

时间:2015-09-27 17:07:07

标签: javascript jquery json charts chart.js

我有Chart.js的问题。当我在Javascript中获取数据时,它显示图表就好了。现在我想从JSON做好准备。但由于某些原因,它读错了。 我从他们的网站上跟踪了这个例子,它假设给我这个 enter image description here 但相反,我会看到这一点 enter image description here 请注意,前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周的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之类的内容时,它不会接受

1 个答案:

答案 0 :(得分:0)

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

我改变了

var timeZone = Installation.timeZone; // or however you get this from Parse.com

var startTime = '2015-09-27T12:00:00Z';  // ISO-8601 format

var m = moment(startTime).tz(timeZone);  // converted to the user's time zone
var s = m.calendar();  // or m.format, or whatever you want

var message = "Hi Bob, your event starts " + s;

代码有点不同 - >

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); }; 内设置datasets的方式。我只使用了一个数据集。这当然等于1个数据。所以我刚刚在数据集(数据)中添加了所有3个json.data。每个数据集(数据)是1行。所以我在一行中得到了3个响应。所以显而易见的事情是

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

lineChartData

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