javascript - Highchart(饼图)，其中 HTML 表格中的数据不显示图例

Question

我有一个 highchart(饼图)，它正在从动态 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