Диаграмма JS: генерировать динамические метки в соответствии с данными - PullRequest
Новая
       39

Диаграмма JS: генерировать динамические метки в соответствии с данными

0 голосов
/ 29 января 2019

Я загружаю график динамически .. Это chart текущего месяца, который колеблется в диапазоне 1-31 enter image description here

Я хочу получить range filter дляпример: 2012/01/1 to 2014/01/1 Как я могу сделать это labels будет слишком много?Допустим, я решил сделать это yearly, но что, если пользователь захочет посмотреть из этого year jan до nov, я должен делать это ежемесячно, тогда как я могу узнать?если это ежемесячно или ежегодно или каков наилучший способ сделать это?

1 Ответ

0 голосов
/ 29 января 2019

Я думаю, что было бы лучше добавить две вкладки с именами ежемесячно и ежегодно, чтобы пользователь мог легко щелкнуть по вкладке, чтобы изменить представления.Например, при просмотре по месяцам будет слишком сложно показывать все месяцы на одном графике (я думаю, что это будет беспорядок с данными), вы должны делать это только с одним месяцем.Просто добавьте datetimepicker только с месяцами (то же самое для лет), при изменении вы можете вызвать функцию, которая также изменит график (см. Здесь, как она работает https://www.tutorialspoint.com/How-does-jQuery-Datepicker-onchange-event-work). Также вы можете установить диапазон лет.

Итак, теперь, когда у вас есть функция, которая будет изменять диаграмму, просто измените данные, получив выбранный месяц, и ваши данные за этот месяц. Есть функция обновления, которую вы можете вызвать, когда обновите данные, и она изменит диаграмму (см. Документы:https://www.chartjs.org/docs/latest/developers/updates.html).

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

document.getElementById('addDataset').addEventListener('click', function() {
        var colorName = colorNames[barChartData.datasets.length % colorNames.length];
        var dsColor = window.chartColors[colorName];
        var newDataset = {
            label: 'Dataset ' + (barChartData.datasets.length + 1),
            backgroundColor: color(dsColor).alpha(0.5).rgbString(),
            borderColor: dsColor,
            borderWidth: 1,
            data: []
        };

        for (var index = 0; index < barChartData.labels.length; ++index) {
            newDataset.data.push(randomScalingFactor());
        }

        barChartData.datasets.push(newDataset);
        window.myBar.update();
    });
...