如何在highchart中格式化x轴标签 [英] How do I format x-axis label in highcharts

问题描述

我有以下的结果输出：

我只想在x-axis标签中看到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 
}，
 credit：{
 enabled：false 
}，
 title：{
 text： '
}，
 xAxis：{
类型：'datetime'，
标签：{
溢出：'justify'
}，
 startOnTick：true，
 showFirstLabel：true，
 endOnTick：true，
 showLastLabel：true，
类别：dateAndTimeArray，$ b $ tickInterval：10，
标签：{
 rotation：0.1，
 align：'left'，
 step：10，
 enabled ：true 
}，
 style：{
 fontSize：'8px'
} 
}，
 yAxis：{
 title：{
 text：'测量值'
} 
}，
工具提示：{
 xDateFormat：'％Y-％m-％d％H：％M'，
共享：true 
}，
图例：{
启用：false 
}，
 plotOptions：{
 area：{
 fillColor：{
 linearGradient：{
 x1：0，
 y1：0，
 x2：0，
 y2：1 
}，$ b $ （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 {
 ... 
标签：{
 ... 
 formatter：function（） {
 return this.value.toString（）。substring（0，6）; 
 
 
 
 
 
 
链接： http://jsfiddle.net/tn6Kw/9/   
I have the following highchart output: 


I just want to see the Feb-10 instead of Feb-10 18:00 in x-axis label. So all the xaxis label will be like Feb-10, Feb-12, and so on. But The tooltip will be the same as the output screen. How can I format the xaxis so that I will get Feb-10, Feb-12, and so on instead of Feb-10 18:00, Feb-12 20:00, and so on.
$(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
            }
        }]
    });
});

解决方案
Cool, try this:

Add this formatter to your xAxis labels object:
xAxis {
    ...
    labels: {
        ...
        formatter: function() {
            return this.value.toString().substring(0, 6);
        },
    }
}
Link: http://jsfiddle.net/tn6Kw/9/

                        
这篇关于如何在highchart中格式化x轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！