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

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

1 个答案: