Блог

Главная - Вопросы по программированию - Как правильно отображать большой объем информации, не слишком стесняя Chart.js

Как правильно отображать большой объем информации, не слишком стесняя Chart.js

#javascript #canvas #graph #charts #chart.js

Вопрос:

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

**Вот оно: ** введите описание изображения здесь

Итак, есть ли способ, которым я могу очистить линии в своей диаграмме? Предпочтительно, без удаления начальных элементов в данных.

**Вот код: **

   var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: [new Date()],
      datasets: [
        {
          label: "# of Votes",
          data: [Math.random()],
          borderWidth: 4,
        },
      ],
    },
    options: {
      elements: {
        line: {
          backgroundColor: "#22ff2252",
          borderColor: "#00de00",
          fill: true,
          borderWidth: 10,
          tension: 0.05,
        },
        point: {
          radius: 0,
          borderWidth: 0,
          pointStyle: "triangle",
        },
      },
      scales: {
        y: {
          beginAtZero: false,
        },
        xAxis: {
          type: "time",
          ticks: {
            source: "auto",
            autoSkip: true,
            maxTicksLimit: 10,
            maxRotation: 0,
            minRotation: 0,
          },
          time: {
            unit: "second",
          },
        },
      },
    },
  });

  setInterval(() => {
    colors = ["#00de00", "#de0000"];
    myChart.options.elements.line.borderColor =
      colors[Math.floor(Math.random() * colors.length)];
    myChart.data.datasets[0].data.push(Math.random());
    var today = new Date();
    var time =
      today.getHours()   ":"   today.getMinutes()   ":"   today.getSeconds();
    myChart.data.labels.push(new Date());
    myChart.update();
  }, 2500); 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<div style="height: 90%; width: 90%">
  <canvas id="myChart"></canvas>
</div>

Ответ №1:

Вы можете использовать плагин децимации, который позволяет определить параметр 'lttb' или 'min-max' алгоритм.

Децимация LTTB значительно сокращает количество точек данных. Это наиболее полезно для отображения тенденций в данных, используя только несколько точек данных.

Минимальное/максимальное прореживание сохранит пики в ваших данных, но может потребоваться до 4 точек для каждого пикселя. Этот тип децимации будет хорошо работать для очень зашумленного сигнала, где вам нужно видеть пики данных.

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

Комментарии:

1. Эй, я прочитал документы и подумал, что это решение, но я не могу его реализовать, мне нужно каким-то образом установить плагин? потому что я определил децимацию плагина в объекте конфигурации, но, похоже, это не работает для меня…

2. Попробуйте добавить parsing: false в свой dataset . Также убедитесь, что все остальные требования выполнены (см. chartjs.org/docs/latest/configuration/… ).

3. Да, но как вы думаете, есть ли способ уничтожить даже при включенном разборе?

Метки: ,