DevExtreme: фильтруем данные на графике

930f7444d8db4d4d84e654ebdd5bdb39.pngФильтрация данных по аргументу — одна из самых распространенных задач при работе с графиком. Именно поэтому так важно наличие простых и удобных способов фильтрации в каждой библиотеке, предназначенной для визуализации данных.6b6f18c3485948c8b0c85b7e3be16254.gif

В этой статье рассмотрим способы фильтрации данных по аргументу в графиках DevExtreme Data Visualization, а именно в компоненте dxChart. А способы вот какие:

использование опций min и max; использование API метода zoomArgument; использование встроенных возможностей zooming и scrolling .Использование опций min и maxe18039b47dd7443395e3d89ff90b0085.pngЭтот способ фильтрации данных является самым простым, потому что основывается на использовании непосредственно опций графика. Он фильтрует данные на изначальном этапе, при построении графика. Для этого достаточно прописать в опциях оси аргументов соответствующие поля min и max:

argumentAxis: { min: 1, max: 5 } Эти опции можно использовать и на более поздних этапах отображения графика с помощью встроенного API метода option для динамического изменения опций: chartInstance = $(».chartContainer»).dxChart («instance»); chartInstance.option («argumentAxis», { min: 1, max: 5 }); Видно, что этот способ является простым, но предназначен он именно для первоначальной фильтрации данных, и является неудобным для последующей. Для фильтрации в режиме run-time больше подойдут следующие способы.Использование API метода zoomArgument 67e0694b1f334bbcb4c8b3d68fdfd1de.gifЭтот API метод является усовершенствованием предыдущего способа и позволяет фильтровать данные в режиме run-time. Первым аргументом этот метод принимает новый минимум на оси, а вторым — новый максимум:

chartInstance = $(».chartContainer»).dxChart («instance»); chartInstance.zoomArgument (1, 5); Метод очень удобен для использования в паре с инструментами фильтрации. Например, вот как он работает с компонентом dxRangeSlider: cfcc177b8e384a3eab29a6e2e4043ad7.gif

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

onValueChanged: function (arg) { chartInstance.zoomArgument (arg.start, arg.end); } Можно пойти еще дальше и воспользоваться специальным инструментом для фильтрации в DevExtreme Data Visualization — компонентом dxRangeSelector.95ec12a046f246c582705fe1516a5589.gif

Его отличие от слайдера в том, что можно отобразить фильтруемый график на заднем плане dxRangeSelector.1075d81d3a774982b045b08076c66a87.png

Вот такой связующий код будет между этими компонентами:

onSelectedRangeChanged: function (arg) { chartInstance.zoomArgument (arg.startValue, arg.endValue); } Метод zoomArgument прекрасно подходит для работы в паре с инструментами фильтрации. Если же не планируется использование таких инструментов, то подойдет следующий способ.Использование встроенных возможностей zooming и scrolling В новой версии 14.2 появилась возможность фильтрации данных «из коробки», просто включив определенный режим в опциях.cb1fc90f7b5e47e6b6e0c8067e9acf1b.gif

Можно разрешить режим zooming для графика, а также режим scrolling, которые поддерживают как манипуляции мышкой, так и пальцем на touch-устройствах:

zoomingMode: «all» | «mouse» | «touch» | «none», scrollingMode: «all» | «mouse» | «touch» | «none» При желании можно отображать встроенный скролл-бар рядом с графиком, внешний вид и положение которого можно настроить: scrollBar: { visible: true } 8c111c9ea29146b8a4923ce9c4f73084.gifЭтот способ «из коробки» поможет фильтровать данные на графике без лишних усилий.

Заключение Для компонента dxChart существует несколько способов фильтрации данных. Всегда можно подобрать тот вариант, который удобен именно вам.8c13e8c3d973492c844cf08497ce3340.gif

Если это нужно сделать на изначальном этапе отображения графика, то воспользуйтесь опциями min и max. API метод zoomArgument подойдет, если будут использоваться инструменты для фильтрации, например dxRangeSlider или dxRangeSelector. Если нужен простой способ «из коробки», поддерживающий манипуляции и мышью и пальцем, прекрасно подойдут встроенные возможности zooming и scrolling.

© Habrahabr.ru