Создание круговой диаграммы из html-таблицы с помощью Highcharts

#javascript #php #html #highcharts

#javascript #php #HTML #highcharts

Вопрос:

Я пытаюсь создать круговую диаграмму из таблицы html с помощью Highcharts. Я взглянул на этот пример для создания своего кода.

Мой код:

 Highcharts.chart('container', {
  data: {
    table: document.getElementById('datatable')
  },
  chart: {
    type: 'pie',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  legend: {
    //align: 'center',
    //verticalAlign: 'top'
  },
  title: {
    text: 'Subject Breakdown'
  },
  tooltip: {
    pointFormat: '{point.name}: <b>{point.y}</b>',
    percentageDecimals: 1
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false,
        color: '#000000',
        connectorColor: '#000000',
        formatter: function() {
          return '<b>'   this.point.name   '</b>: '   this.y;
        },
        
      },
      showInLegend: true
    }
  }
});
  

Таблица и Div:

 <div id="container">

<table id='datatable' style='border: 1px solid black'><thead><tr>
<th>Country </th>
<th>Counter</th>
</tr></thead><tbody>
<?php

foreach($analysis_data as $row){
    echo "<tr>";
    foreach(['country','counter'] as $attribute){
        echo "<td>".$row[$attribute]."</td>";    // close `td` here
    }
    echo '</tr>';
}
?>
</tbody></table>
  

Я получаю сообщение об ошибке, Uncaught Error: Highcharts error #13: и оно относится к этой странице. Кто-нибудь знает, как это исправить?

Комментарии:

1. Пожалуйста, взгляните на эту демонстрацию: highcharts.com/docs/working-with-data /… и ошибка, возникающая в вашем проекте, говорит о том, что div где будет создана диаграмма, пропущена.

2. Спасибо. Что-то было не так с div, теперь я это исправил.