Javascript HTML表格中的数据不显示图例的Highchart（饼图）

我有一个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：

//创建图表
$（函数（）{
$（“#容器”）。高图({
数据：{
表：document.getElementById（'datatable'）
},
图表：{
键入“pie”，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
图例：{
对齐：'居中'，
垂直线：'顶部'
},
标题：{
正文：“主题分类”
},
工具提示：{
pointFormat:“{point.name}:{point.y}”，
百分比小数：1
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：false，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“+this.point.name+”：“+this.y；
},
showInLegend：对
}
}
}
});
});

下表：

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

名称
名称

之所以发生这种情况，是因为您将

showInLegend

放置在

dataLabels

配置对象的内部，而不是

饼图

。请直接将其剪切/粘贴到

plotOptions.pie

object，一切都会按照您的预期进行

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

数据：{
表：document.getElementById（'datatable'）
},
图表：{
键入“pie”，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
图例：{
//对齐：'居中'，
//垂直排列：“顶部”
},
标题：{
正文：“主题分类”
},
工具提示：{
pointFormat:“{point.name}:{point.y}”，
百分比小数：1
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：false，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“+this.point.name+”：“+this.y；
},
},
showInLegend：对
}
}

现场示例：

---

API参考：

谢谢！这是有效的，但由于某些原因，我得到了每个图例条目的副本。对不起，这是我的表。我曾经。。。而不是现在修好了

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