2016-04-14 9 views
0

ハイチャートを使用してHTMLテーブルを解析し、そこから柱のチャートを生成しています。問題は、見出しのように数字や日付を使用すると、グラフに「不足している」年が追加されることです。ハイチャート欄チャート、データテーブルからロードするときの補間を無効にする

JSFiddleの実施例を参照してください:​​

テーブル:

<table id="datatable"> 
<thead> 
    <tr> 
     <th></th> 
     <th>Jane</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <th>2006</th> 
     <td>3</td> 
    </tr> 
    <tr> 
     <th>2008</th> 
     <td>2</td> 
    </tr> 
    <tr> 
     <th>2009</th> 
     <td>5</td> 
    </tr> 
    <tr> 
     <th>2011</th> 
     <td>1</td> 
    </tr> 
    <tr> 
     <th>2012</th> 
     <td>2</td> 
    </tr> 
</tbody> 
</table> 

と設定:

$('#container').highcharts({ 
    data: { 
     table: 'datatable' 
    }, 
    chart: { 
     type: 'column' 
    }, 
    yAxis: { 
     allowDecimals: false, 
     title: { 
      text: 'Units' 
     } 
    }, 
    plotOptions: { 
     series: { 
     connectNulls: false 
     } 
    } 
}); 

私はconnectNulls: falseを使用しようとしたが、それは効果がありません。

2007年と2010年がチャートに表示されないようにする設定はありますか?チャートでは、HTML内のデータのみを使用し、補間などは使用しません。

私はあなたが助けてくれることを願っています!ありがとう!

ヨハン

答えて

2

私は名前を変更し、名前のxAxis.categoriesを移入するcompleteコールバックを使用して、解決策を見つけた:

参照:http://jsfiddle.net/ng2yvq4o/2/

$('#container').highcharts({ 
    data: { 
     table: 'datatable', 
     /** 
     * Modify generated settings 
     */ 
     complete: function (settings) { 
      // We are going to create categories from each item in the series 
      settings.xAxis = { 
      categories: [] 
      }; 
      settings.series.map(function (series) { 
       return series.data.map(function (series_item) { 
       // Cast the item name to a string to prevent interpolation 
       series_item[0] = String(series_item[0]); 
       // Add the name to our categories: 
       settings.xAxis.categories.push(series_item[0]); 
       return series_item; 
      }); 
      }); 
     } 
    }, 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Data extracted from a HTML table in the page' 
    }, 
    yAxis: { 
     allowDecimals: false, 
     title: { 
      text: 'Units' 
     } 
    } 
}); 

私は他の人が思っていますこれを使う!

グリーティング、 ヨハン

関連する問題