如何在Highcharts的xAxis中顯示月份和年份datetime圖

我使用angularjs和highcharts同時顯示日期型圖表類型。日期值從JSON響應中撤回，如20120905（YYYYMMDD）。正如我在很多論壇上看到的，我將日期轉換爲UTC格式以在圖形中進行繪圖。該圖是正確繪製的，但我的xaxis對於所有日期時間值的UTC值（例如1,370G）顯示不同。如何在Highcharts的xAxis中顯示月份和年份datetime圖

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

來源

2013-10-03 googytech

我認爲唯一需要改變的是xAxis的配置。

請嘗試以下（只強調x軸的部分）：

$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這樣的標籤。另外，由於樣本數據的間隔爲一個月，因此如果您在dateTimeLabelFormats中配置了day格式，則不會更改xAxis的標籤格式。相反，您需要配置month格式，因爲最小時間間隔爲一個月。

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

來源

2013-10-03 22:54:02

固定同樣的問題，我想你所說的話。但我仍然遇到同樣的問題。我的xaxis標籤完全沒有改變。 – googytech

@ user544808我使用了您的示例數據並創建了一個工作小提琴：http://jsfiddle.net/WEgmq/1/我還更新了有關小提琴的解釋的答案。希望它能幫助你。 –

還需要刪除：'labels：{format：'{value：％Y}'}，'。 –

我簡單地通過這個這裏jsFiddle

var app = angular.module('app', []); 
app.directive('myChart', function() { 
    return { 
     restrict: 'A', 
     replace: true, 

     template: '<div><div class="chart"></div><div><button id="btn">Click</button></div></div>', 
     link: function (scope, elem, attrs) { 
      elem.children(".chart").highcharts({ 
       xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
       }, 

       series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
       }] 

      }); 
     } 
    } 
}); 
      }); 
     } 
    } 
});`

來源

2015-04-19 05:08:23

如何在Highcharts的xAxis中顯示月份和年份datetime圖

回答

相關問題