Highcharts sütun grafiği, veri tablosundan yüklenirken enterpolasyonu devre dışı bırak

Question

Bir HTML tablosunu ayrıştırmak ve ondan bir sütun şeması oluşturmak için Highcharts kullanıyorum. Sorun şu ki, başlık gibi sayı veya tarih kullandığımda, grafik 'kayıp' yılları ekler. http://jsfiddle.net/ng2yvq4o/1/

tablo:

<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> 

Ve yapılandırma:

JSFiddle çalışan örneğe bakın ben connectNulls: false kullanmayı denedim

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

ama hiçbir etkisi yoktur.

2007 ve 2010 yıllarını grafikte göstermeyen bir ayar var mı? Grafiğin sadece HTML'deki verileri kullanmasını ve enterpolasyon veya hiçbir şey kullanmamasını istiyorum.

Umarım yardımcı olabilirsiniz! Teşekkürler!

Johan

Answer 1

Ben bir çözüm bulduk isimleri değiştirmek ve adları ile xAxis.categories doldurmak için complete geri arama kullanın:

Bkz: Ben diğerleri var umut 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' 
     } 
    } 
}); 

Bunun için kullanın!

Selamlar, Johan