2015-06-22 2 views
3

Я пытаюсь составить диаграмму для своего веб-сайта, которая берет на год количество дат (записи за каждый день), а затем отображает их на графике.Как построить даты в Chart.js

Я пытался писать функцию, которая делает список всех дат в том, что V = определенный диапазон в формате

"date1", "date2", "date3", ... 

, а затем помещает эту переменную строку в серии chart.js

var lineChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      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: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
     } 
    ] 

Если у меня есть код выше, он будет выводить график. Но мне нужно, чтобы он был динамичным, поэтому у меня есть функции, которые создают даты и данные. Но при вызове этих функций в переменную linechartData диаграмма не работает.

var lineChartData = { 
    labels: [genDates()], 
    datasets: [ 
     { 
      label: "My First dataset", 
      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: [genData()] 
     }, 

Этот код непосредственно выше не работает.

Если у кого-то есть предложения по построению данных, пожалуйста, напишите ниже.

Метод genData просто генерирует случайные числа

function gendata() { 
    var i = 0; 
    var data = ""; 
    while (i < 365) { 
     data = data + Math.round(Math.random() * 100) + ", "; 
     i = i + 1; 
    } 
    return data; 
} 

метод gendate

function getDates(startDate, stopDate) { 
    var dateArray = new Array(); 
    var currentDate = startDate; 
    while (currentDate <= stopDate) { 
     dateArray.push(new Date(currentDate)); 
     currentDate = currentDate.addDays(1); 
    } 
    dates = ""; 
    for (i = 0; i < dateArray.length; i++) { 
     date = date + dateArray[i] + ", "; 
    } 
    return dates; 
} 
+0

Можете ли вы добавить реализацию для 'genDates' и' getData'? –

+0

Добавил эти методы к вопросам. – jmurphy1267

ответ

3

Проблема заключается в том, что существует несоответствие типа у genDates. Массив меток будет оцениваться как массив с одной строкой в ​​нем, в отличие от вашего исходного примера. Чтобы обойти это, вы можете сразу вернуть массив и удалить массив обтекания из определения диаграммы.

+0

Я не уверен, понимаю ли я то, что вы описываете. Можете ли вы объяснить это дальше? – jmurphy1267

+0

@ jmurphy1267 Ваш '[genDates()]' оценивается как '['Январь, Февраль, ...']'. Не как массив из нескольких строк. –

0
var areaChartData = { 
labels: labelsnuevos(productos), 
    // here goes my dataset 
}; 

function labelsnuevos(productos) 
{ 
    var labels = []; 

    $.each(productos, function(key, value) { 
     var lab = value.nombre; 
     labels.push(lab); 
    }); 
    return labels; 
} 

У меня есть PRODUCTOS вместо даты, но вам нужно передать вашу «дату» переменный, в данном случае моего переменной I sproductos, то с Еогеаспом берут и нажать его значение.

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