2017-04-10 79 views
0

在Highcharts我想刪除這些年來在哪裏沒有價值
給出了具體的一年x軸。這個怎麼用?
當你看看空蕩蕩年甚至是沒有定義的數據表。
的API提供的示例設置breaks但這似乎不符合我的數據選項switchRowsAndColumns工作=真。如何刪除空軸Highcharts蜱?

的圖表:The generated chart

Highcharts代碼:

var $renderTo = $('#container'); 

var chart = Highcharts.chart({ 
    data: { 
     table: 'datatable', 
     switchRowsAndColumns: true, 
     decimalPoint: ',' 
    }, 
    chart: { 
     renderTo: $renderTo[0], 
     type: 'line' 
    }, 
    title:{ 
     text: null 
    }, 
    subtitle:{ 
     text: null 
    }, 
    xAxis: { 

    }, 
    yAxis: { 
     title: { 
      text: unescape('yAxis Label') 
     }, 
     stackLabels: { 
      enabled: false 
     } 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: false 
      } 
     }, 
     spline: { 
      dataLabels: { 
       enabled: false 
      } 
     }, 
     series: { 
      marker: { 
       radius: 1 
      } 
     } 
    }, 
    series: [{ 
     type: 'column'   
    }, { 
     type: 'column'   
    }, { 
     type: 'column'   
    }, { 
     type: 'column' 
    },{ 
     type: 'column'   
    }, { 
     type: 'column'   
    }, { 
     type: 'column'   
    }, { 
     type: 'column' 
    },{ 
     type: 'column'   
    }, { 
     type: 'column'   
    },{ 
     type: 'column'   
    }, { 
     type: 'column'   
    }, { 
     type: 'spline'   
    }] 

}); 

數據表:

<table id="datatable"> 
    <thead> 
    <tr> 
    <th>Components</th> 
    <th>1990</th> 
    <th>2000</th> 
    <th>2009</th> 
    <th>2010</th> 
    <th>2011</th> 
    <th>2012</th> 
    <th>2013</th> 
    <th>2014</th> 
    <th>2015</th> 
    <th>2016</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <th>Component 1</th> 
    <td>31,1</td> 
    <td>25,7</td> 
    <td>24,5</td> 
    <td>23,0</td> 
    <td>24,5</td> 
    <td>25,5</td> 
    <td>25,2</td> 
    <td>24,8</td> 
    <td>23,9</td> 
    <td>23,1</td> 
    </tr> 
    <tr> 
    <th>Component 2</th> 
    <td>27,7</td> 
    <td>29,5</td> 
    <td>22,6</td> 
    <td>22,2</td> 
    <td>17,6</td> 
    <td>15,8</td> 
    <td>15,2</td> 
    <td>15,5</td> 
    <td>14,2</td> 
    <td>13,1</td> 
    </tr> 
    <tr> 
    <th>Component 3</th> 
    <td>25,6</td> 
    <td>24,8</td> 
    <td>18,1</td> 
    <td>18,5</td> 
    <td>18,3</td> 
    <td>18,5</td> 
    <td>19,9</td> 
    <td>18,9</td> 
    <td>18,2</td> 
    <td>17,0</td> 
    </tr> 
    <tr> 
    <th>Component 4</th> 
    <td>6,5</td> 
    <td>8,5</td> 
    <td>13,6</td> 
    <td>14,1</td> 
    <td>14,0</td> 
    <td>12,1</td> 
    <td>10,6</td> 
    <td>9,7</td> 
    <td>9,6</td> 
    <td>12,1</td> 
    </tr> 
    <tr> 
    <th>Component 5</th> 
    <td>2,0</td> 
    <td>1,0</td> 
    <td>1,7</td> 
    <td>1,4</td> 
    <td>1,2</td> 
    <td>1,2</td> 
    <td>1,1</td> 
    <td>0,9</td> 
    <td>1,0</td> 
    <td>0,9</td> 
    </tr> 
    <tr> 
    <th>Component 6</th> 
    <td></td> 
    <td>1,6</td> 
    <td>6,5</td> 
    <td>6,0</td> 
    <td>8,0</td> 
    <td>8,0</td> 
    <td>8,0</td> 
    <td>8,9</td> 
    <td>11,0</td> 
    <td>10,3</td> 
    </tr> 
    <tr> 
    <th>Component 7</th> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>0,1</td> 
    <td>0,2</td> 
    <td>1,3</td> 
    <td>2,0</td> 
    </tr> 
    <tr> 
    <th>Component 8</th> 
    <td>3,6</td> 
    <td>4,3</td> 
    <td>3,2</td> 
    <td>3,3</td> 
    <td>2,9</td> 
    <td>3,5</td> 
    <td>3,6</td> 
    <td>3,1</td> 
    <td>2,9</td> 
    <td>3,3</td> 
    </tr> 
    <tr> 
    <th>Component 9</th> 
    <td></td> 
    <td>0,3</td> 
    <td>4,4</td> 
    <td>4,7</td> 
    <td>5,3</td> 
    <td>6,3</td> 
    <td>6,5</td> 
    <td>6,9</td> 
    <td>6,9</td> 
    <td>7,0</td> 
    </tr> 
    <tr> 
    <th>Component 10</th> 
    <td></td> 
    <td>0,0</td> 
    <td>1,1</td> 
    <td>1,8</td> 
    <td>3,2</td> 
    <td>4,2</td> 
    <td>4,9</td> 
    <td>5,7</td> 
    <td>6,0</td> 
    <td>5,9</td> 
    </tr> 
    <tr> 
    <th>Component 11</th> 
    <td></td> 
    <td>0,3</td> 
    <td>0,7</td> 
    <td>0,7</td> 
    <td>0,8</td> 
    <td>0,8</td> 
    <td>0,8</td> 
    <td>1,0</td> 
    <td>0,9</td> 
    <td>0,9</td> 
    </tr> 
    <tr> 
    <th>Component 12</th> 
    <td>3,5</td> 
    <td>3,9</td> 
    <td>3,6</td> 
    <td>4,2</td> 
    <td>4,2</td> 
    <td>4,1</td> 
    <td>4,1</td> 
    <td>4,3</td> 
    <td>4,1</td> 
    <td>4,3</td> 
    </tr> 
    <tr> 
    <td>Component 13</td> 
    <td>3,6</td> 
    <td>6,6</td> 
    <td>15,9</td> 
    <td>16,6</td> 
    <td>20,2</td> 
    <td>22,8</td> 
    <td>23,9</td> 
    <td>25,9</td> 
    <td>29,0</td> 
    <td>29,5</td> 
    </tr> 
    </tbody> 
    </table> 



SOLUTION
溶液下面建議作爲答案工作BU這裏t爲Highcharts一個本地方法:
只需設置X軸類型爲「類別」。這可以確保顯示錶格中定義的字符串。

xAxis: { 
    type: "category" 
}, 

回答

1

您可以隱藏你的數據表使用X軸格式

xAxis: { 
    labels: { 
     formatter: function() { 
     if (this.chart.series[0].xData.indexOf(this.value) == -1) { 
      return null; 
     } else { 
      return this.value 
     } 
     }, 
    }, 
    }, 

這裏不屬於標籤是完全FIDLE http://jsfiddle.net/1ofs0mof/1/

更新:

如果您要隱藏的空間,我能想到的唯一的事情就是讓highcharts認爲是t他類別是由表<th>1990A</th>加入到第一年和在標籤格式A替換爲空字符串

這裏串的全部小提琴http://jsfiddle.net/1ofs0mof/3/

+0

但空間仍然:(我想隱藏沒有給定年數值的完整空間。你有另一個想法嗎?非常感謝! – lixobize

+0

我更新了答案 –