高级图表不尊重标签格式

High Charts not honouring the label format

本文关键字：标签格式高级图更新时间：2023-09-26

我使用高图表来构建一个图形，它具有多个y轴和x轴日期时间为基础。但我发现，无论我在X轴上设置何种格式，如果日期是连续的，它都不支持(例如:7月01日，7月02日，7月03日)。X轴总是给出格式:日期。月，尽管我指定了日期/月。

有谁能帮我配置选项吗?

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%e/%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: [{
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        }, {
        		opposite: true,
            title: {
                text: 'Snow height (m)'
            },
            min: 0
        }],
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'Winter 2012-2013',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            yAxis: 1,
            data: [
                [Date.UTC(2016, 7, 01), 4],
                [Date.UTC(2016, 7, 02), 5],
                 [Date.UTC(2016, 7, 03), 15]
            ]
        }, {
            name: 'Winter 2013-2014',
            data: [
                [Date.UTC(2016, 7, 01), 44],       
                [Date.UTC(2016, 7, 02), 5],
                [Date.UTC(2016, 7, 03), 135]
            ]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

将dateTimeLabelFormats更改为，

dateTimeLabelFormats: {
   day: '%e / %b',
   week: '%e / %b'
}

将解决这个问题。

工作JSFiddle演示: https://jsfiddle.net/6jo3gvfa/