如何在highcharts中格式化x轴标签

如何在highcharts中格式化x轴标签,highcharts,format,Highcharts,Format,我有以下highchart输出: 我只想看看x轴标签上的2月10日而不是2月10日18:00。所以所有的xaxis标签都是2月10日,2月12日,等等。但是工具提示将与输出屏幕相同。如何设置xaxis的格式,以便获得2月10日、2月12日等,而不是2月10日18:00、2月12日20:00等 $(function () { $('#container').highcharts({ chart: { zoomType: 'xy',

我有以下highchart输出:

我只想看看x轴标签上的2月10日而不是2月10日18:00。所以所有的xaxis标签都是2月10日,2月12日,等等。但是工具提示将与输出屏幕相同。如何设置xaxis的格式,以便获得2月10日、2月12日等,而不是2月10日18:00、2月12日20:00等

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            spacingRight: 20
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            },
            startOnTick: true,
            showFirstLabel: true,
            endOnTick: true,
            showLastLabel: true,
            categories: dateAndTimeArray,
            tickInterval: 10,
            labels: {
                rotation: 0.1,
                align: 'left',
                step: 10,
                enabled: true
            },
            style: {
                fontSize: '8px'
            }
        },
        yAxis: {
            title: {
                text: 'Measurement value'
            }
        },
        tooltip: {
            xDateFormat: '%Y-%m-%d %H:%M',
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                //  threshold: null
            }
        },
        series: [{
            type: 'line',
            name: 'Value',
            data: chartData,
            marker: {
                enabled: false
            }
        }]
    });
});
酷,试试这个:

将此格式化程序添加到
xAxis
标签
对象:

xAxis {
    ...
    labels: {
        ...
        formatter: function() {
            return this.value.toString().substring(0, 6);
        },
    }
}

链接:

您的
dateAndTimeArray
chartData
数组是什么样子的?如果你能修改一下你的代码,那将非常有帮助。DateAndTimeArray包含所有的日期和时间,格式为2月10日18:00,2月12日20:00,等等。chartData是另一个包含数值的数组。例如,dateAndTimeArray=[Feb-10 18:00,Feb-10 20:00,Feb-10 22:00,…,Feb-12 20:00],chartData=[93.12,94.18,98.72,…,91.24]。我使用ui:repeat获得了dateAndTimeArray和chartData,这是一个jsf代码