Highcharts時間系列組合圖，其中幾個月的數據是空的

Question

我想開發一個多軸組合圖，使用highcharts api與x軸和y軸的月份，2軸有百分比和1有數字。這與您在link中看到的內容類似。當你有12個月的Y軸數據時，這個工作正常。在某些情況下，y軸數據會丟失幾個月。在這種情況下，我仍然想在沒有數據的x軸上顯示月份。目前，如果我只有2個月的y軸數據（例如6月和12月），它將顯示爲1月和2月的數據。請找到我正在使用的代碼，並讓我知道可以解決這個問題。

var chartMonthlyData = { 
        title: { 
         text: '' 
        }, 
        xAxis: [{ 
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
         crosshair: true 
        }], 
        yAxis: [{ 
        min: 0, 
        max: 50, 
        labels: { 
          format: '{value} %' 
         }, 
        title: { 
          enabled: false 
         }, 
        opposite: true 
        }, { 
         title: { 
          text: '', 
         }, 
         labels: { 
         formatter: function() { 
           return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
          } 
         } 
        }, { 
         min: 0, 
         max: 50, 
         title: { 
         enabled : false 
         }, 
         labels: { 
          enabled: false 
         }, 
         opposite: true 
        }], 
        tooltip: { 
         shared: true 
        }, 
        legend: { 
         layout: 'horizontal', 
         align: 'right', 
         x: -30, 
         verticalAlign: 'top', 
         y: -5, 
         floating: true, 
         backgroundColor: '#FFFFFF' 
        }, 
        series: [{ 
         color: '#C8102E', 
         name: 'Delivered', 
         type: 'column', 
         yAxis: 1, 
         data: deliveredMonthly, 
         tooltip: { 
          pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>' 
          + '{point.y}' +'</b><br/>' 
         } 
        }, { 
         color: '#AAAAAA', 
         name: 'Open Rate', 
         type: 'line', 
         yAxis: 2, 
         data: openRateMonthly, 
         lineWidth: 4, 
         marker: { 
          enabled: true, 
          "symbol": "circle" 
         }, 
         tooltip: { 
          valueSuffix: ' %' 
         } 
        }, { 
         color: '#5891c8', 
         name: 'Clickthrough Rate', 
         type: 'line', 
         data: clickThroughRateMonthly, 
         lineWidth: 4, 
         marker: { 
          enabled: true, 
          "symbol": "circle" 
         }, 
         tooltip: { 
          valueSuffix: ' %' 
         } 
        }] 
      } 

在此圖像中，在x軸的實際月份是一月，六月和八月。我需要在圖表中顯示12個月，y軸數據與月份相適應。

Answer 1

獲得從服務器側正確數據或提供到highcharts

data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null], 

附加或替代null以與對應於一個月，以便具有系列長度相同類別沒有值的數據系列之前更新該數據

Fiddle demo

Answer 2

只需在xAxis對象內添加max參數即可。

API參考：
http://api.highcharts.com/highcharts/xAxis.max

例子：
http://jsfiddle.net/xkqn4qq7/

Answer 3

有多種方式來格式化數據，使得差距顯示出來。您可以使用一個2維數組：

var deliveredMonthly =[[0,4],[5,5],[7,2]], 

您可以使用對象的數組，設置x & Y：

openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}], 

而且，您可以填充空值的一個維數組，你缺失數據點。

clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50]; 

爲了保證您擁有所有12個月中，您應該設置最小和最大的x軸

xAxis: [{ 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
    ], 
    crosshair: true, 
    min:0, 
    max:11 
    }], 

http://jsfiddle.net/v159gw36/2/