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/

Highcharts：将图像添加到图例中

1 个答案: