Chart.js получает массив видимых в данный момент точек на графике - PullRequest
Новая
       15

Chart.js получает массив видимых в данный момент точек на графике

2 голосов
/ 29 октября 2019

Используя Chart.js с включенным масштабированием / панорамированием, я пытаюсь написать функцию для экспорта в CSV только того, что видно на холсте.

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

Я знаю, что могу просто посмотреть на myChart.data.datasets, но при этом будут выбраны все точки на графике, а не только видимые в данный момент. 

var config = {
    type: 'line',
    data: {
        // data is from API call
    }
        pan: {
            enabled: true,
            mode: 'xy'
        },
        zoom: {
            enabled: true,
            mode: 'xy'
        },
        bezierCurve : false
    }
};

var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);

$('#exportTheseRunsToCSV').on('click', function() {
    // something like myChart.getVisibleDataPoints() ???
    console.log(chart)
    console.log(chart.data.datasets)
});

Должен быть какой-то внутренний вызов API для получения видимых точек, так как у меня также есть функция для экспорта текущих видимых точек в PNG, которая захватывает только то, что в данный момент нарисовано на холсте: 

<a id="exportTheseRuns" class="text-white" href="#" download="image.png" download><i class="fas fa-download"></i> Export to PNG</a>

$('#exportTheseRuns').on('click', function() {
    $('#exportTheseRuns').attr('href', myChart.toBase64Image());
})

Кажется, что функция .toBase64Image() внутренне выполняет то, что я ищу, поскольку она захватывает только видимые точки, но затем возвращает URI Base64, который я не могу использовать для своей функции arrayToCSV.

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

Объект диаграммы содержит свойства minIndex и maxIndex, которые можно использовать для slice набора данных для видимых значений.

Вот фрагмент кода, показывающий, как использовать предоставляемые плагином функции onPanComplete и onZoomComplete для вывода видимых значений после панорамирования или масштабирования диаграммы: 

function getVisibleValues({
  chart
}) {
  let x = chart.scales["x-axis-0"];

  document.getElementById("vv").innerText = JSON.stringify(chart.data.datasets[0].data.slice(x.minIndex, x.maxIndex + 1));
}

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
    datasets: [{
      data: [0, 1, 2, 4, 8, 16, 32, 64, 128, 256]
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        ticks: {
          min: 'c',
          max: 'h'
        }
      }]
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x',
          onPanComplete: getVisibleValues
        },
        zoom: {
          enabled: true,
          mode: 'x',
          onZoomComplete: getVisibleValues
        }
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
<canvas id="chart" style="max-height:125px"></canvas>
<p>
  Visible values: <span id="vv"></span>
</p>
0 голосов
/ 02 ноября 2019

Функция toBase64Image делает не то, что вам нужно, она просто получает URL данных с холста.

toBase64Image на github.com/chartjs

toBase64Image: function() {
  return this.canvas.toDataURL.apply(this.canvas, arguments);
},

Вы можете получить обновленные данные диаграммы с помощью onZoomComplete и onPanComplete, они оба получают объект, содержащий chart, из этого вы можете получить больше информации о текущем масштабе, но, насколько я вижу, вам понадобитсясделать некоторые расчеты / работы, чтобы получить видимые точки ...

...