Highcharts не делает этикетки из HTML таблицы

Question

В Highcharts - как вы получите ярлыки и всплывающие метки, чтобы ссылаться на первый столбец в HTML таблице:

я добавил к этой скрипкой: http://jsfiddle.net/XJ9ck/3/ - круговая диаграмма делает , с правильными номерами, но это только ярлыки, которые не работают. Я подозреваю, что что-то здесь:

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> 

Мой браузер:

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

Для исправить ваши имена e. Сгенерируйте массив данных в javascript, а затем создайте highchart.

Проверьте следующий JSFiddle, он работает так, как вы ожидаете и используете свою таблицу.

Он строит массив данных в javascript динамически, а затем создает диаграмму.

View Working JSFiddle!

Я добавил legend на line 58 of the Javascript, удалите строку, если вы не хотите, (Вы также можете нажать на названия условных обозначений, чтобы добавить/удалить их из диаграммы).

Я хотел бы также предложить проверяя Highcharts Docs:http://api.highcharts.com/highstock
Это очень хорошо документировано и имеет все, что вам потребуется бы, если возникнут какие-либо вопросы.

Кроме того, вы можете удалить «highcharts.com», добавив следующее в начало страницы.

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

:)