如何使用highcharts设置基于日,周或月类别的折线图的日期范围?

时间:2019-06-20 13:32:46

标签: angularjs highcharts

我正在尝试使用Highcharts创建折线图。 我从Web API调用日期(一次50个日期)。日期格式为'2019-06-19 14:02:05.527'。通过使用angularjs的forEach循环调用日期。从那里开始,日期直接在Highcharts的类别部分中调用。 我在Highcharts中创建了一个onscroll函数,以便我们可以向下滚动到月,周或日。但是问题在于日期没有在日,周或月中自动格式化。它直接从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

0 个答案:

没有答案