具有来自HTML表的数据的Highchart（饼图）未显示图例

Question

I have a highchart (pie chart) which is loading its data from a dynamic HTML table. The chart itself is working well, but, I can't get the legend to show up.

Has anyone else had this problem where the legend for a chart won't appear? And, do you know of a solution?

I've looked at the examples on the Highcharts website and can't seem to find a solution.

The container:

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

The chart 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
                }
            }
        }
    });
});

The table:

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

It occurs because you placed the showInLegend inside of the dataLabels configuration object, instead of pie . Please just cut/paste it directly to plotOptions.pie object, and everything will works as you expecting.

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

Live example: http://jsfiddle.net/qw5y4nvm/

API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.showInLegend