onclick在中心显示甜甜圈图块的信息 [英] onclick display donut chart pieces' information in center

问题描述

我正在尝试为我们的状态页创建一个高位图表，每当单击一个甜甜圈时，它就会分离，但是随后它还需要以良好的格式在甜甜圈图的中心显示包含的所有信息，但是我无法使它正常工作.

I am trying to create a highchart for our status page, whenever a piece of the donut is clicked it detaches, but then it also needs to display whatever information it contains in a nice format in the center of the donut chart, however I cannot get it to work.

我设法创建了一个单击函数，将单击部分中的数据放入图表下方的跨度中，但是我知道这样做有更好的方法.

I've managed to create a click function that puts the data from the clicked piece into a span below the chart, but I know there's a better way of doing this.

            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();               
                          }
                    }
                }
             }
        },

请在下面检查我的小提琴，谢谢阅读

Please check my fiddle below, thanks for reading

jsFiddle

推荐答案

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

You can use chart.renderer for adding custom label in your chart on point click:

  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/

Here you can see an example how it can work: https://jsfiddle.net/ucweax9h/13/

这篇关于onclick在中心显示甜甜圈图块的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！