1

我有一个使用 angularjs 和 highcharts 显示的日期线类型的图表。从 JSON 响应中检索日期值，例如 20120905(YYYYMMDD)。正如我在许多论坛中所读到的，我将日期转换为 UTC 格式以绘制图表。该图绘制正确，但我的 xaxis 显示所有日期时间值的 UTC 值，如 1,370G。

$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
        }
    });
4

1 回答 1

4

我认为您唯一需要更改的是 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另外，由于您的样本数据的间隔是一个月，因此如果您在 中配置格式，xAxis 的标签格式不会改变dateTimeLabelFormats。相反，您需要配置month格式，因为最小间隔为一个月。

玩玩dateTimeLabelFormats，minTickInterval你可以得到你想要的。

于 2013-10-03T22:54:02.880 回答