Как я могу переключать мой ZingChart между ежемесячными / квартальными / полугодовыми приращениями?

Question

У меня есть набор дат и оценок, с одним счетом в месяц, который выглядит примерно так:

Date        Score
...
11/16/2012  14.30
12/14/2012  14.40
01/25/2013  12.10
02/22/2013  12.30
03/22/2013  16.10
04/26/2013  13.60
05/24/2013  16.80
06/21/2013  16.50
07/26/2013  16.20
08/23/2013  16.00
09/27/2013  13.60
10/25/2013  12.60
11/29/2013  8.00

Я использую ZingChart для отображения этих данных на линейном графике. Я пытаюсь предоставить пользователю возможность полной настройки, включая возможность изменять данные с ежемесячных (по умолчанию) на квартальные или полугодовые. Например, если пользователь выбирает "ежеквартально", он должен показываться только каждые 3 месяца (в обратном направлении - поэтому будут отображаться данные за 11/29, 8/23, 5/24 и т. Д.).

Как я могу заставить ZingChart показывать только каждый n-й пункт? (И переключаться между этими приращениями легко)

Answer 1

Я вижу, что это более старый вопрос, но, надеюсь, мой ответ поможет вам, если вы все еще работаете с ZingChart.

Это можно сделать, вызвав метод api setseriesdata, чтобы изменить данные ряда, чтобы отображать только те точки, которые вы хотите, когда пользователь изменяет интервал. В этой демонстрации я реализовал простой HTML <select> элемент для создания выпадающего меню.

<select id="interval">
<option value=1>Monthly</option>
<option value=2>Quarterly</option>
<option value=3>Semi-Annually</option>
</select>

Я слушаю изменения в раскрывающемся меню, используя событие JQuery .change(), и изменяю данные ряда в зависимости от того, какая опция была выбрана.

$('#interval').change(function(){
var select = document.getElementById("interval");
var selVal = select.options[select.selectedIndex].value;
if(selVal==1){
    zingchart.exec("zc", "setseriesdata", {
        "plotindex":0,
        "data":{
        "values":[[1353024000000,14.3],[1355443200000,14.4],[1359072000000,12.1],[1361491200000,12.3],[1363910400000,16.1],[1366934400000,13.6],[1369353600000,16.8],[1371772800000,16.5],[1374796800000,16.2],[1377216000000,16.0],[1380240000000,13.6],[1382659200000,12.6],[1385683200000,8.0]]
        }
    });
}
else if(selVal==2){
//setseriesdata API call with quarter data here
}
else if(selVal==3){
//setseriesdata API call with semi-annual data here
}
});

Еще несколько вещей:

Вы можете использовать "зеркальный" логический атрибут в вашем объекте "scale-x", чтобы инвертировать данные в этом масштабе.

ZingChart использует время Unix (в миллисекундах) для ряда времени / даты.

Обязательно просмотрите исходный код демо-страницы, чтобы увидеть полный код.