Верхняя диаграмма (круговая диаграмма) с данными из таблицы HTML без отображения легенды

Question

У меня есть старшая диаграмма (круговая диаграмма), которая загружает свои данные из динамической таблицы HTML.Сам график работает хорошо, но я не могу найти легенду.

Кто-нибудь еще имел эту проблему, где легенда для диаграммы не появится?И знаете ли вы о решении?

Я посмотрел примеры на веб-сайте Highcharts и, похоже, не могу найти решения.

Контейнер:

<section>
  <div style="float:left;margin-right:10px;">
    <div id="container" style="min-width: 250px; max-width: 250px; height: 500px; margin: 0 auto"></div>
  </div>
...
</section>

Диаграмма JS:

// Create the chart
   $(function () {
$('#container').highcharts({
    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
                }
            }
        }
    });
});

Таблица:

<!-- Data for Subject Breakdown Chart -->
    <table id="datatable">
        <thead>
            <tr>
                <th>name</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $count=1;
            $sel_query="Select subject, count(subject) as total from engagements GROUP BY subject;";
            $result = mysqli_query($con,$sel_query);
            while($row = mysqli_fetch_assoc($result)) { ?>

            <tr>
                <th><?php echo $row['subject']; ?><th>
                <td><?php echo $row['total']; ?></td>
            </tr>


           <?php $count++; } ?> 
        </tbody>
    </table>

Answer 1

Это происходит потому, что вы поместили showInLegend внутри объекта конфигурации dataLabels вместо pie.Пожалуйста, просто обрежьте / вставьте его прямо в plotOptions.pie объект, и все будет работать так, как вы ожидаете.

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

Живой пример: http://jsfiddle.net/qw5y4nvm/

Справочник по API: https://api.highcharts.com/highcharts/plotOptions.pie.showInLegend