Question

我有一个＆＃34; areaplinerange＆＃34;跨越x轴的日期的图表类型。我试图弄清楚如何对齐/显示或默认为月末的最后一天或月末作为标记的标签。

数据本身就在那里 - 这意味着日期会被发送到图表，但是标记在上个月开始之前是正确的。希望这张图片能更好地展示我所说的内容。如果您对此有任何想法或建议，我们将非常感谢您的信息。谢谢。

Answer 1

你可以看看这个jsFiddle。希望它有助于您尝试做什么。您可以根据需要在X轴上更改日期。

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Average fruit consumption during one year'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && 
Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
        categories: [
            '31-01-17',
            '28-02-17',
            '31-03-17',
            '30-04-17',
            '31-05-17',
            '30-06-17',
            '31-07-17',
            '31-08-17',
            '30-09-17',
            '31-10-17',
            '30-11-17',
            '31-12-17'
        ],
        plotBands: [{ // visualize the year-end
            from: 4.5,
            to: 6.5,
            color: 'rgba(68, 170, 213, .2)'
        }]
    },
    yAxis: {
        title: {
            text: 'Fruit units'
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Mango',
        data: [3, 4, 3, 5, 4, 10, 12, 6, 4, 8, 11, 14]
    }, {
        name: 'Apple',
        data: [1, 3, 4, 3, 3, 5, 4, 2, 7, 8, 5, 9]
    }]
});

感谢。

在X轴中显示或对齐到月末

1 个答案: