Как уменьшить количество точек данных, отображаемых в react-chart-js2 (прореживание данных)
Я использую react-chartjs-2 для отображения линейного графика с ценовыми данными за заданный период времени (например, цена за прошлую неделю, прошлый месяц, с начала года и т. д.). При отображении более 60 или около того дней ценовых данных линия начинает загромождать. Итак, я хочу уменьшить количество точек данных, отображаемых на диаграмме, при этом представляя весь диапазон данных.
Я наткнулся на плагин chartjs-pluging-downsample, вроде бы он должен работать: https://www.npmjs.com/package/chartjs-plugin-downsample
Также документы react-chartjs-2 описывают способ расширения диаграммы, но я не смог понять код плагина.
import { Chart } from 'react-chartjs-2';
componentWillMount() {
Chart.pluginService.register({
afterDraw: function (chart, easing) {
// Plugin code.
}
});
}
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-downsample';
<Line
ref = {(reference) => this.chartReference = reference }
options = {{
responsive: true,
downsample: {
enabled: true,
threshold: 50,
auto: false, // don't re-downsample the data every move
onInit: true, // but do resample it when we init the chart (this is default)
preferOriginalData: true, // use our original data when downscaling so we can downscale less, if we need to.
restoreOriginalData: false, // if auto is false and this is true, original data will be restored on pan/zoom - that isn't what we want.
}
}}
data = {this.makeChart}
/>
Как я могу использовать этот плагин (или какой-либо другой метод) для достижения желаемого результата?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хорошо, я думаю, что понял это, и это до смешного просто, я напечатал объект, импортированный из chartjs-plugin-downsample, и он получился подозрительно похожим на то, что вы должны передать службе плагинов.
Итак, способ сделать это:
import { Chart } from 'react-chartjs-2';
import DownsamplePlugin from 'chartjs-plugin-downsample';
...(component declaration)...
componentWillMount() {
Chart.plugins.register(DownsamplePlugin);
}
...(rest of your component)...
а потом просто поиграться с опциями. Обязательно установите параметры min и max, иначе у меня были странные вещи.
В конце концов я отказался от попыток заставить плагин работать, он все еще делал странные вещи с моей осью, поэтому я написал свой собственный скрипт прореживания данных. Надо было просто сделать это с самого начала.
Ха-ха, я понял и спасибо за попытку! Если вы хотите поделиться своим собственным скриптом прореживания данных, мне было бы интересно посмотреть, что работает для вас. Ваше здоровье
У меня был немного специфический вариант использования, поэтому код подходит для этого (я строил график от 1 до 5 звезд с течением времени). Это некрасиво и (я подозреваю) неэффективно, но свою работу выполняет, и делает это достаточно хорошо. В итоге я добавил ползунок для выбора максимального количества отображаемых точек. Если вы пройдете через него, вы заметите, что когда он объединяет две точки, он также запоминает исходные данные, а не только сумму или среднее значение. Я сделал это, потому что у меня есть всплывающая подсказка при наведении курсора на точку данных, которая показывает, какой промежуток времени представляет эта точка, и сколько звездочек было получено там.
Хорошо, я соврал, это не давало мне спать, поэтому вот нормализованная версия: pastebin.com/MPCChEfn
Круто, спасибо, что поделились! Когда у меня будет больше времени, я хочу добавить прореживание данных в этот проект: git-masi.github.io/bitcoin-data-visualizer/#/price-index, поэтому я опубликую код, когда доберусь до него.
Я не совсем понял, как это работает для моего конкретного случая использования, но, по крайней мере, вы можете зарегистрировать плагин, поэтому я думаю, что на данный момент это принятый ответ. Также для всех, кто читает, я должен был использовать
componentDidMount() {...}, потому чтоcomponentWillMount() {...}устарел.