Question

我使用angularjs和highcharts显示了日期线类型的图表。日期值从JSON响应中检索，如20120905（YYYYMMDD）。正如我在许多论坛中所读到的，我将我的日期转换为UTC格式，以便在图表中进行绘图。图表是正确绘制的，但我的x轴显示所有日期时间值的1,370G等UTC值。

$scope.chartConfig = {
            options: {
                chart: {
                    type: 'line',
                    zoomType: 'x'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '% of Accounts',
                data: outerSeries   /* Contains the data  similar to this. [[1368835200000, 2.9], [1371513600000, 0.5], [1374105600000, 1.94], [1376784000000, 1.44], [1379462400000, 1.18]] */
            }],  
            title: {
             text: tableTitle
            },
            xAxis: [{

                labels: {format: '{value:%Y}' },
                /*dateTimeLabelFormats:{
                  month:'%Y',
                  year:'%Y'
                },*/
              type:"datetime"
            }],
            yAxis: {title: {text: 'TestReport'}},
            tooltip: {
              formatter: function() {
              var myDate = new Date(this.x);
              var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
              return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', newDateMs) +': '+ this.y;}
            },
            //xAxis: {currentMin: 0, currentMax: 10, minRange: 1, title:{text:'Time Period'}},
            //xAxis: {ordinal:false,type:'datetime', dateTimeLabelFormats: {  year: '%b%Y' }, title:{text:'Time Period'}},
            loading: false
        }
    });

Answer 1

我认为您需要更改的唯一内容是xAxis的配置。

尝试以下操作（仅突出显示xAxis部分）：

$scope.chartConfig = {
        // other configuration
        xAxis: {
          type:"datetime",
          dateTimeLabelFormats:{
            month: '%b %e, %Y'
          }  // label in x axis will be displayed like Jan 1, 2012
        },
        // other configuration
}

我使用了您的示例数据并创建了一个工作小提琴：http://jsfiddle.net/WEgmq/1/

随意玩小提琴。您可能会注意到，如果您注释掉type:"datetime"，xAxis将显示如您所提到的1,370G这样的标签。此外，由于示例数据的间隔为一个月，因此如果在day中配置dateTimeLabelFormats格式，则不会更改xAxis的标签格式。相反，您需要配置month格式，因为最小间隔是一个月。

使用dateTimeLabelFormats，minTickInterval，您可以获得所需内容。

如何在Highcharts日期时间图的xAxis中显示月份和年份

1 个答案: