Highcharts：将图像添加到图例中

Question

我有这张图表。我想在图例的矩形中添加一些检查图标，当它被选中时。 我怎么能这样做？

  var chart = new Highcharts.Chart({
    chart: {
        renderTo: this,
        type: 'pie'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }

    },
    series: [{
        data: jsonChart
    }],
    legend: {
        symbolWidth: 40,
        align: 'right',
        layout: 'vertical',
        verticalAlign: 'top',
        x: 40,
        y:0,
        width: 150,

    },

});

}）; The chart

Answer 1

您可以使用Renderer在图表中渲染图像。

  function drawTicks() {
    const {
      translateX: tx,
      translateY: ty
    } = this.legend.group;

    this.series[0].points.forEach(p => {
      let img = p.img;

      if (!img) {
        p.img = img = this.renderer.image('http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png', -9999, 0, 15, 15).attr({
          zIndex: 10
        }).add();
      }

      const bbox = p.legendSymbol.getBBox();
      const x = p.legendGroup.translateX + tx;
      const y = p.legendGroup.translateY + ty;

      img.attr({
        x: x,
        y: y
      });
    });
  }

加载/重绘绘制刻度

 chart: {
    events: {
      load: drawTicks,
      redraw: drawTicks
    }
  },

在legendItemClick上更改img的可见性

  series: [{
    type: 'pie',
    name: 'Browser share',
    point: {
      events: {
        legendItemClick: function() {
          this.img.attr({
            visibility: !this.visible ? 'visibile' : 'hidden'
          });
        }
      }
    },

示例：http://jsfiddle.net/3348yjrq/