Chart.js не отображает нормальную диаграмму

У меня проблема с Chart.js. когда у меня были данные в Javascript, он показал график просто отлично. Теперь я хотел бы сделать его готовым от JSON. но по какой-то причине его чтение неверно. я последовал примеру с их сайта, и предполагают, чтобы показать мне эту , но вместо этого я получаю, чтобы увидеть эту Обратите внимание на первые 3 недели данные о них. когда я нависаю над ними, он показывает мне данные. здесь является JSONChart.js не отображает нормальную диаграмму

[{ 
"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 данные только на 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 внутри наборов данных.

источник

2015-09-27 Metalbreath

Для тех, у кого такая же проблема, я нашел решение. Очевидно, это было прямо на моих глазах.

Я ве изменил

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 внутри lineChartData. Я использовал только ОДИН набор данных. Это, конечно, равно 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. Это отличная библиотека.

источник

2015-09-27 18:40:42 Metalbreath

Chart.js не отображает нормальную диаграмму

ответ

Смежные вопросы