Question

我正在尝试为我们的状态页面创建一个高图，每当点击一个甜甜圈时它会分离，但是它还需要在甜甜圈图表的中心以漂亮的格式显示它包含的任何信息，但是我无法让它发挥作用。

我设法创建了一个点击功能，将点击的数据放入图表下方的范围内，但我知道有更好的方法可以做到这一点。

            series: {
            point: {
                events: {
                    click: function() {
                        $("#displayStats").text(this.name + this.y);
                        },
                    load: function() {
                    var chart = this,
                        rend = chart.renderer,
                        pie = chart.series[0],
                        left = chart.plotLeft + pie.center[0],
                        top = chart.plotTop + pie.center[1],
        text = rend.text("text", left, top).attr({ 'text-anchor':'middle'}).add();               
                          }
                    }
                }
             }
        },

请在下面查看我的小提琴，感谢您阅读

jsFiddle

Answer 1

您可以使用chart.renderer在点击点击图表中添加自定义标签：

  addLabel = function(point) {
    $('.cLabel').remove();
    var text = point.name + ': ' + point.y,
      chart = point.series.chart,
      renderer = chart.renderer;
    chart.renderer.label(text, chart.chartWidth / 2, chart.chartHeight / 2).attr({
      'text-anchor': 'middle',
    }).addClass('cLabel').add();
  };

在这里，您可以看到一个示例：https://jsfiddle.net/ucweax9h/13/

onclick显示圆环图表中心的信息

1 个答案: