javascript - 如何在 PIE 图表中显示图例从图表到饼钻取 Highcharts

Question

我想知道如何显示饼图的图例，我目前完成了饼图钻取的列，但对于饼图没有图例，我想知道如何放置它？ 我尝试将 legend = true 但它仍然没有显示在饼图中。

我也尝试过:

饼图:{ 允许点选择:true， 光标:'指针'， 数据标签:{ 启用:假 }, 显示传奇: true }

我的代码如下:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Chart showing the total vs match dialogs'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: ''
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal = {!! $countTotalRecord['low confidence'] !!} + {!! $countTotalRecord['no answer'] !!} + {!! $countTotalRecord['missing intent'] !!} + {!! $countTotalRecord['webhook fail'] !!};
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }
    },

    tooltip: {
        // headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '{point.name}: <b>{point.y}</b>'
    },

    credits:{
      enabled:false
    },

    series: [{
        name: 'front',
        colorByPoint: true,
        data: [{
            name: 'Total',
            y: {!! $countTotalRecord['total'] !!},
            drilldown: 'total'
        }, {
            name: 'Match',
            y: {!! $countTotalRecord['match'] !!},
            drilldown: 'match'
        }]
    }],
    drilldown: {
        series: [{
            name: 'total',
            id: 'total',
            type:'pie',
            data: [
                [
                    'Low Confidence',
                    {!! $countTotalRecord['low confidence'] !!}
                ],
                [
                    'No Answer',
                    {!! $countTotalRecord['no answer'] !!}
                ],
                [
                    'Missing Intent',
                    {!! $countTotalRecord['missing intent'] !!}
                ],
                [
                    'Webhook Fail',
                    {!! $countTotalRecord['webhook fail'] !!}
                ]
            ]
        }]
    }
});

Answer 1

你必须使用

 events: {
  drilldown: function(e) {
    this.options.legend["enabled"] = true; //legend shows
  },
  drillup: function(e) {
    this.options.legend["enabled"] = false; //legend hides
  },

}

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      drilldown: function(e) {
        this.options.legend["enabled"] = true;
      },
      drillup: function(e) {
        this.options.legend["enabled"] = false;
      },

    }
  },
  title: {
    text: 'Browser market shares. January, 2015 to May, 2015'
  },
  subtitle: {
    text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Total percent market share'
    }

  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y:.1f}%'
      }
    },
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },

  series: [{
    name: 'Brands',
    colorByPoint: true,

    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33,
      drilldown: 'Microsoft Internet Explorer'
    }, {
      name: 'Chrome',
      y: 24.03,
      drilldown: 'Chrome'
    }, {
      name: 'Firefox',
      y: 10.38,
      drilldown: 'Firefox'
    }, {
      name: 'Safari',
      y: 4.77,
      drilldown: 'Safari'
    }, {
      name: 'Opera',
      y: 0.91,
      drilldown: 'Opera'
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2,
      drilldown: null
    }],
    dataLabels: {
      enabled: false,
    }
  }],
  drilldown: {
    series: [{
      type: 'pie',
      name: 'Microsoft Internet Explorer',
      id: 'Microsoft Internet Explorer',
      data: [
        [
          'v11.0',
          24.13
        ],
        [
          'v8.0',
          17.2
        ],
        [
          'v9.0',
          8.11
        ],
        [
          'v10.0',
          5.33
        ],
        [
          'v6.0',
          1.06
        ],
        [
          'v7.0',
          0.5
        ]
      ]
    }, {
      type: 'pie',
      name: 'Chrome',
      id: 'Chrome',
      data: [
        [
          'v40.0',
          5
        ],
        [
          'v41.0',
          4.32
        ],
        [
          'v42.0',
          3.68
        ],
        [
          'v39.0',
          2.96
        ],
        [
          'v36.0',
          2.53
        ],
        [
          'v43.0',
          1.45
        ],
        [
          'v31.0',
          1.24
        ],
        [
          'v35.0',
          0.85
        ],
        [
          'v38.0',
          0.6
        ],
        [
          'v32.0',
          0.55
        ],
        [
          'v37.0',
          0.38
        ],
        [
          'v33.0',
          0.19
        ],
        [
          'v34.0',
          0.14
        ],
        [
          'v30.0',
          0.14
        ]
      ]
    }, {
      type: 'pie',
      name: 'Firefox',
      id: 'Firefox',
      data: [
        [
          'v35',
          2.76
        ],
        [
          'v36',
          2.32
        ],
        [
          'v37',
          2.31
        ],
        [
          'v34',
          1.27
        ],
        [
          'v38',
          1.02
        ],
        [
          'v31',
          0.33
        ],
        [
          'v33',
          0.22
        ],
        [
          'v32',
          0.15
        ]
      ]
    }, {
      type: 'pie',
      name: 'Safari',
      id: 'Safari',
      data: [
        [
          'v8.0',
          2.56
        ],
        [
          'v7.1',
          0.77
        ],
        [
          'v5.1',
          0.42
        ],
        [
          'v5.0',
          0.3
        ],
        [
          'v6.1',
          0.29
        ],
        [
          'v7.0',
          0.26
        ],
        [
          'v6.2',
          0.17
        ]
      ]
    }, {
      type: 'pie',
      name: 'Opera',
      id: 'Opera',
      data: [
        [
          'v12.x',
          0.34
        ],
        [
          'v28',
          0.24
        ],
        [
          'v27',
          0.17
        ],
        [
          'v29',
          0.16
        ]
      ]
    }]
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>