Как установить диапазон дат на основе дня, недели или месяца в категориях для линейного графика, используя высокие графики? - PullRequest
0 голосов
/ 20 июня 2019

Я пытаюсь создать линейный график, используя Highcharts. Я звоню на дату из веб-API (50 дат за один раз). Формат даты: «2019-06-19 14: 02: 05.527». Даты вызываются с помощью цикла forEach с помощью angularjs. Оттуда дата напрямую вызывается в разделе категорий в Highcharts. Я создал функцию прокрутки в Highcharts, чтобы мы могли прокрутить вниз до месяца, недели или дня. Но проблема в том, что дата не форматируется автоматически в день, неделю или месяц. Он напрямую использует тот же формат из Web API.

Я попробовал эту скрипку. https://jsfiddle.net/9kyw8uky/6/?utm_source=website&utm_medium=embed&utm_campaign=9kyw8uky

В этом я хочу заменить статическую дату датами, поступающими из Web API.

angular.forEach(response.data, function(value, key) {
    var obj = {
        InsertDate: moment(value.InsertDate).format('DD/MM/YYYY hh:mm a')
    };
    vm.SensorTop50ChartDate.push(obj.InsertDate);
});


Highcharts.chart({
    chart: {
        zoomType: 'x',
        renderTo: 'Temp_chart',
        type: 'line',
        spacingLeft: 0,
        spacingRight: 0
    },
    dateRangeGrouping: {
        dayFormat: {
            month: 'numeric',
            day: 'numeric',
            year: 'numeric'
        },
        weekFormat: {
            month: 'numeric',
            day: 'numeric',
            year: 'numeric'
        },
        monthFormat: {
            month: 'numeric',
            year: 'numeric'
        }
    },
    tooltip: {
        dateTimeLabelFormats: {
            week: '%e. %b',
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: vm.SensorTop50ChartDate,
        type: 'datetime',
        dateTimeLabelFormats: {
            week: '%e. %b',
        }
    },
    yAxis: {
        title: {
            text: 'Amp'
        }
    },
    plotOptions: {
        line: {
            enableMouseTracking: true
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Data 1',
        data: vm.SensorTop50ChartData
    }]
});

Currently the chart is looking like this

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...