Question

$(function () {
    $('#dc-item-demand-graph').highcharts({
        chart: {
            type: 'spline',
            padding : 0
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            startOnTick: true,
            type: 'datetime',
            pointInterval: 5 * 24 * 3600000,
            gridLineWidth: 1,
            plotLines: [{
                color: '#f36c6c',
                dashStyle: 'Solid',
                value: 2, // Value of where the line will appear
                width: 2 // Width of the line    
            }]
        },
        yAxis: {
            min: 0,
            max: 700,
            gridLineWidth: 0,
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            enabled: false,
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        //tooltip: {
        //    valueSuffix: '°C'
        //},
        series: ItemDemandChartData()
    });
});
function ItemDemandChartData() {
    var data = [{

            name: 'At DC',
            dashStyle: 'dot',
            color: '#616fc6',
            data: [400, 390, 300]
        }, {
            name: 'At stores',
            dashStyle: 'ShortDash',
            color: '#ffdb03',
            data: [300, 320, 360, 320, 500]
        }, {
            name: 'ROP Generated',
            dashStyle: 'ShortDash',
            color: '#00c4db',
            data: [200, 300, 500, 450, 400],            
            marker: {
                enabled: true,
                radius: 3,
                symbol: 'triangle',
                //symbol: 'url(/Content/Img/markdown.PNG)',
                color: '#00c4db'
            },
        }]

    return data
}

上面是我试过的图表的代码。其中我有格式X轴值，如附图所示。

我不确定在哪里更改x轴类别或系列选项中的代码？ kinldy帮帮我。

提前感谢!!

更新jsfiddle link：

Answer 1

这是因为您的数据仅涉及y轴值，而是日期时间中的x轴。

data: [300, 320, 360, 320, 500]

因此它以0为开始时间，y为每1秒。如果你想在x轴上有日期，请将数据设为二维，如下所示

data: [
                [Date.UTC(2010, 0, 1), 300],
                [Date.UTC(2010, 0, 2), 320],
                [Date.UTC(2010, 0, 3), 360],
                [Date.UTC(2010, 0, 6), 320],
                [Date.UTC(2010, 0, 7), 500]
            ]

而不是UTC日期，你也可以加上时间戳。

这是示例jsfiddle。

您可以根据需要使用datforamt

here是日期格式化的一个示例（由于pointstart和pointInterval，此示例以常规间隔显示）

X轴日期在highcharts中出现

1 个答案: