2014-09-02 3 views
0

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

Это мои переменные и как я создаю мой массив:

//variables to use 
var ArrayForDailyUsage = []; 
var ArrayForTotalUsage = []; 
var theTotalUsageSoFar = 0; 
var ArrayForTheDate = []; 
var ArrayForHoldingTheUsageInformation = []; 
var usageplan = 1024; 

Это, как я настраивал свои данные для линейного графика:

var data = { 
    labels: //This is where I want to add ArrayForTheDate[] 
     ["Aug 1", "Aug 2", "Aug 3", "Aug 4", "Aug 5"], 

    datasets: [{ 
      label: "Usage Plan", 
      fillColor: "rgba(255,255,255,0.2)", //adds the color below the line 
      strokeColor: "rgba(224,0,0,1)", //creates the line 
      pointColor: "rgba(244,0,0,1)", //gets rid of the circle 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: //this is where I want to add my ArrayForHoldingTheUsageInformation[] 
       [usageplan, usageplan, usageplan, usageplan, usageplan] 
     }, { 
      label: "Overall Usage", 
      fillColor: "rgba(48,197,83,0.2)", 
      strokeColor: "rgba(48,197,83,1)", 
      pointColor: "rgba(48,197,83,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(48,197,83,1)", 
      data: //this is where I want to add ArrayForTotalUsage[] 
       [15, 25, 45, 70, 80] 
     }, { 
      label: "Daily Usage", 
      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: //this is where I want to add ArrayForDailyUsage[] 
       [15, 10, 20, 25, 10] 
     } 
    ] 
};  

В случае, если вам интересно, это как я добавляю свою диаграмму

var maxUsage = 1024; 
var maxSteps = 5; 

var myLineChart = new Chart(ctx).Line(data, { 
    pointDot: false, 
    scaleOverride: true, 
    scaleSteps: maxSteps, 
    scaleStepWidth: Math.ceil(maxUsage/maxSteps), 
    scaleStartValue: 0 
}); 

Почему я не могу: ярлыки: ArrayOfDates [];

Есть ли простой способ добавить свои массивы в данные моей диаграммы? Как я к этому подхожу? Заранее спасибо! Пожалуйста, дайте мне знать, если я неясен или у вас есть какие-либо вопросы !!!

ответ

1

Это то, что вы просто хотите использовать массивы, которые вы заявляете при настройке своих данных? Если это так, вы можете просто ссылаться на них непосредственно

var data = { 
    labels: ArrayForTheDate, 

    datasets: [{ 
      label: "Usage Plan", 
      fillColor: "rgba(0,0,0,0.2)", //adds the color below the line 
      strokeColor: "rgba(224,0,0,1)", //creates the line 
      pointColor: "rgba(244,0,0,1)", //gets rid of the circle 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: ArrayForHoldingTheUsageInformation 
     }, { 
      label: "Overall Usage", 
      fillColor: "rgba(48,197,83,0.2)", 
      strokeColor: "rgba(48,197,83,1)", 
      pointColor: "rgba(48,197,83,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(48,197,83,1)", 
      data: ArrayForTotalUsage 
     }, { 
      label: "Daily Usage", 
      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: ArrayForDailyUsage 
     } 
    ] 
}; 

здесь скрипку usign некоторые данные, чтобы показать, что работает http://jsfiddle.net/leighking2/35o54t2L/

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

  • Нет связанных вопросов^_^