Highchart x-Axis标签显示双重日期

时间:2014-11-28 09:35:05

标签: javascript jquery highcharts

我在我的项目中使用高级图表,它在x轴上显示两次日期,如何删除它并在x轴上只获得1个日期。

以下是现在enter image description here

的快照

如何摆脱双日期显示。

编辑:添加图表选项

这些是我正在使用的选项

chart: {
            renderTo: divId,
            type: 'column'
        },
        title: {
            text: chartTitle
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        xAxis: {
            type: 'datetime',

            labels: {
                format: '{value:%Y-%m-%d}',

                rotation: 45,
                align: 'left'
            },

            title: {
                text: 'Date'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            max: 1440,
            stackLabels: {
                enabled: false

            }
        },
        legend: { 
                  backgroundColor: 'rgba(211,223,181,0.6)', 
                  layout: 'vertical', 
                  align: 'left', verticalAlign: 'top', 
                  floating: true, 
                  borderWidth: 0, x: 70 
         }

1 个答案:

答案 0 :(得分:2)

当您在同一天/周/月等内有多个日期或多个刻度时,通常会发生这种情况,并且格式化程序设置为仅返回日/周/月等。尝试指定tickInterval值并且x轴选项中的dateTimeLabelFormats对象:

  xAxis: {
        type: 'datetime',
        tickInterval: 3600*1000,
        dateTimeLabelFormats: {
            second: '%Y-%m-%d<br/>%H:%M:%S',
            minute: '%Y-%m-%d<br/>%H:%M',
            hour: '%Y-%m-%d<br/>%H:%M',
            day: '%Y-%m-%d',
            week: '%Y-%m-%d',
            month: '%Y-%m',
            year: '%Y'
        },
        labels: {
            /*formatter: function() {
                console.log(this);                    
            },*/
            rotation: 45,
            align: 'left'                
        },
        title: {
            text: 'Date'
        }
    }

请记住,如果您告诉图表在x轴上返回日期,并且tickInterval是每小时,则该日内的所有刻度将具有相同的标签。