2016-02-23 2 views
0

Я пытаюсь создать простой линейный график, используя Chart.JS, чтобы отобразить мои данные.Как построить график линии с данными x и y

В моем случае, данные поступают в форме, которая выглядит следующим образом:

[[1452,100],[1330,100],[1307,100],[1105,100],[1071,200],[1261,100]] 

Если первая запись в каждой части есть координаты х, а второй является координату.

В примерах, приведенных в документации chart.js, координаты х просто текстовые метки:

var data = { 
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
    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: [65, 59, 90, 81, 56, 55, 40] 
     }, 
     { 
      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: [28, 48, 40, 19, 96, 27, 100] 
     } 
    ] 
}; 

Что является лучшим способом для построения х и у данных без просто генерировать непристойное количество меток (в то время как данные в этом случае составляли 6 записей, на самом деле это были бы тысячи).

EDIT:

Для ясности, я не имею в виду график рассеяния график - данные структурированы и будет, в силу которой приходит данные, образуют линию. Ось x будет в порядке, без дубликатов записей.

Эти данные будут выглядеть примерно ниже:

enter image description here

ответ

0

Это звучит, как вы хотите, чтобы сделать график рассеяния. Ни один из примеров Chart.js не показывает, как создавать графики рассеяния, потому что у него нет этой способности. Если вы должны использовать Chart.js, вы можете использовать надстройку для диаграммы рассеяния, как это доступно в https://dima117.github.io/Chart.Scatter/.

Если вы не возражаете изменить свою библиотеку, вы можете рассмотреть что-то вроде Highcharts или Dojo Charting. Есть много вариантов, но я считаю, что эти два довольно просты в использовании.

+0

Нет, структура данных формирует идеальную линию без перекрытий. Это два набора данных, которые выглядят примерно так: https://zeroblock.com/img/visual-depth.png –

+0

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

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