2013-02-22 93 views
1

我「米工作類似於以下http://jsfiddle.net/7FdQR/1/ignoreHiddenSeries沒有在X軸隱藏值,如果顯示的系列有空數據

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -100, 
      verticalAlign: 'top', 
      y: 20, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        this.series.name +': '+ this.y +'<br/>'+ 
        'Total: '+ this.point.stackTotal; 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [null, 3, 7, 2, null] 
     }, { 
      name: 'Jane', 
      data: [2, 2, 3, 2, 1] 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5] 
     }] 
    }); 
}); 

})一highchart;

如果你看一下數據對於John,你會看到一些蘋果和香蕉的空值。

如果我們禁用Jane和Joe系列,只留下John的信息,我們仍然可以看到x軸上的所有水果類別,即使有空值約翰的數據集和ignoreHiddenSeri es設置爲true。我想在這裏實現的是將x軸重新繪製爲僅顯示橘子,梨和葡萄標籤(而不是在x軸上的蘋果和香蕉標籤)。有沒有辦法在highchart中做到這一點?

謝謝!

回答

0

找到了解決方案。它可能不是最好的,但它的工作原理http://jsfiddle.net/Hm8T9/

我創建了一個小腳本,並使用setExtremes()函數爲xAxis手動設置mins和max。

此外,如果你曾經處理過< 5個類別,並且不想顯示所有這些類別(例如我的示例),請將minRange設置爲xAxis爲1或任何需要的數字。

xAxis: 
{ 
    minRange: 1 
} 
相關問題