2016-09-26 3 views
3

Можно ли использовать пару X и Y в опции data в Chart.js для создания символа панели?Данные с парами значений X и Y

data: [ 
    ['08/09/2016', 12], 
    ['09/09/2016', 19] 
], 

Будучи в форме [X, Y]

Я не нашел никаких упоминаний об этом в документации. Чем ближе я получил это было найдено в line charts example:

  data: [{ 
       x: -10, 
       y: 0 
      }, { 
       x: 0, 
       y: 10 
      }, { 
       x: 10, 
       y: 5 
      }] 
+0

Почему вы не используете общий синтаксис? Вы получаете массив из API? – tektiv

+0

@Тектив действительно я. – Alvaro

+0

Кроме того, я также использую highcharts, где вы можете выбрать оба способа для свойства 'data'. – Alvaro

ответ

5

Там нет встроенного способа создать диаграмму, используя массив прямо в данные.

Но вы можете создать небольшую работу, используя Chart.js plugins. Они позволяют обрабатывать события вызвали в течение всего создания диаграммы, такие как, прежде чем он инициализируется, после изменения размера и т.д.


Следит небольшой плагин, который будет заполнять все данные для вас с помощью массива:

var myPlugin = { 
    // We edit what is happening before the chart is initialized. 
    beforeInit: function(chart) { 
     var data = chart.config.data; 

     // `APIarray` is what you get from your API. 
     // For every data in this array ... 
     for (var i = 0; i < APIarray.length; i++) { 
      // Populate the labels array with the first value .. 
      data.labels.push(APIarray[i][0]); 
      // .. and the data with the second value 
      data.datasets[0].data.push(APIarray[i][1]); 
     } 
    } 
}; 

Затем вам нужно добавить только что созданный плагин к вашим услугам плагина Chart:

Chart.pluginService.register(myPlugin); 


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

Вы можете увидеть полностью рабочий пример on this jsFiddle.

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