Highcharts不是HTML表格

Question

在HighCharts渲染標籤，使用正確的數字，但它只是標籤不起作用。我懷疑它的東西在這裏：

dataLabels: { 
       enabled: true, 
       color: '#000000', 
       connectorColor: '#000000', 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
      } 

感謝您的幫助，

馬克

我的代碼是：

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/data.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<table id="datatable2"> 
<thead> 
    <tr> 
     <th>Num</th> 
     <th>Status Reason</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Client Action Required</td> 
     <td>64</td> 
    </tr> 
    <tr> 
     <td>Future Enhancement</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td>Client Hold</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>Monitoring</td> 
     <td>11</td> 
    </tr> 
</tbody> 
</table> 

<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div> 

我的JavaScript：

$(function() { 
    $('#container').highcharts({ 
     data: { 
      table: document.getElementById('datatable2') 
     }, 
     chart: { 
      type: 'pie' 
     }, 
     title: { 
      text: 'Queue by Person and Status' 
     }, 

     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     } 

     , plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 
      } 
     } 
    }); 
}); 

Answer 1

要修復你的名字issu e，在JavaScript中生成數據數組，然後創建高圖。

檢查以下JSFiddle，它的工作原理是如何使用您的表格。

它動態地在javascript中構建數據數組，然後生成圖表。

View Working JSFiddle!

我上line 58 of the Javascript添加legend，刪除行，如果你不想要的話，（你也可以點擊傳奇的名字添加/從圖表中刪除它們）。

我也建議檢查出Highcharts文檔：http://api.highcharts.com/highstock
這是非常有據可查，有，如果你遇到任何問題，你需要的一切。

此外，您可以通過將以下內容添加到頁面頂部來刪除'highcharts.com'。

// By default.. ALL charts should not show the credits (if you want) 
Highcharts.setOptions({credits: {enabled: false}}); 

:)