Диаграмма.js: другой размер набора данных

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



Один набор данных имеет, очевидно, 7 точек данных, другой-168.



Я не смог найти пример или документально подтвержденный вариант, который позволил бы это сделать. Конечно , я могу настроить почти все, что касается внешнего вида и ощущения, но когда дело доходит до размера данных, ожидается, что оба набора данных будут иметь столько точек данных, сколько есть ценник.



Я хотел бы иметь метки только для набора данных с меньшим количеством точек данных (в этом примере: daily avg), а остальные (168 точек данных) просто нарисуют тонкую линию и не должны добавлять ничего другого к диаграмме (никаких вертикальных баров и т. д.)



Возможно ли это с диаграммой.js?

526   1  

1 ответ:

То, что вы описываете, на самом деле возможно с помощью диаграммы.js до тех пор, пока по крайней мере 1 из ваших наборов данных может быть выражен с помощью альтернативного набора данных точечной диаграммы. Позвольте мне показать вам пример, где я показываю дневную среднюю в виде баров и часовую среднюю в виде линии (aka, смешанный тип графика).

Сначала сконфигурируйте столбчатую диаграмму с метками для каждого дня недели и укажите средние значения за день для данных в качестве первого набора данных.

Далее создайте другой набор данных, но установите его свойство type в 'line'. Поскольку мы хотим использовать другую ось X и другой набор меток, вы должны выразить свои данные с помощью нотации {x: 0, y: 2}. Это позволит вам обойти масштаб от использования меток, определенных выше.

Наконец, в вашей конфигурации options.scales Определите 2 масштаба xAxes и свяжите ваш 2-й набор данных со 2-м масштабом оси X (также установите его свойство display в false, чтобы вы не видели никакого 2-го масштаба).

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

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    datasets: [{
      type: 'bar',
      label: 'Daily Avg',
      backgroundColor: chartColors.red,
      data: dailyAvgData,
      borderColor: 'white',
      borderWidth: 2
    }, {
      type: 'line',
      label: 'Hourly Avg',
      borderColor: chartColors.green,
      backgroundColor: chartColors.green,
      borderWidth: 1,
      fill: false,
      pointRadius: 0,
      xAxisID: 'x-axis-2',
      data: hourlyAvgData
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{}, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        display: false,
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50
        }
      }]
    }
  }
});

Вы можете увидеть его в действии на этом codepen.

Вот еще один пример, но вместо того, чтобы использовать комбинированную диаграмму (день-бары, час-линия), оба графика являются линиями. Подход точно такой же, за исключением того, что тип диаграммы изменен с bar на line.

Обратите внимание, что в этой версии я скорректировал дневную среднюю линию на единицу, Чтобы точки были нанесены в "конце дня". Предыдущий пример был отображение ежедневного среднего значения в начале каждого дня (что технически неверно).

Вот пример codepen, который демонстрирует линейную версию диаграммы.

5  
2017-04-06 17:36:58

Comments

    Ничего не найдено.
Click here to cancel reply.