圆环图，在饼图内和下方都有文本

Question

我想创建这样的图表

我是这样创建的

此处添加的文本是明确的，顶部和左侧固定。我希望它具有响应性。即当屏幕尺寸改变时移动。有办法吗？在 highchart 文档中，只有名称属性没有给出标题属性。我的代码在这里给出 jsfiddle

 $(function() {
    $('#percentile ').highcharts({
        title: {
            text: 'Section Scores'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '50px',
                    top: '12px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'pie',
            name: 'Total ',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [100, 80],
            size: 150,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }, {
            type: 'pie',
            name: ' consumption',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [400, 80],
            size: 150,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

Answer 1

您可以使用 Highcharts.SVGRenderer class 并在具有计算位置的图表上呈现自定义 svg 元素，例如：

chart: {
  events: {
    render: function() {
      var chart = this,
        series1BBox = chart.series[0].group.getBBox(),
        series2BBox = chart.series[1].group.getBBox(),
        x1 = chart.plotLeft + series1BBox.x + series1BBox.width / 2,
        x2 = chart.plotLeft + series2BBox.x + series2BBox.width / 2,
        y1 = chart.plotTop + series1BBox.y + series1BBox.height / 2,
        y2 = chart.plotTop + series1BBox.y + series1BBox.height;

      if (!this.customLabels) { // render custom labels
        chart.customLabels = [];

        this.customLabels[0] = chart.renderer.text('Text 1')
          .css({
            color: '#4572A7',
            fontSize: '16px',
            'vertical-align': 'middle'
          })
          .attr({
            align: 'center'
          })
          .add();
        ...
      }

      // define position
      chart.customLabels[0].attr({
        x: x1,
        y: y1 + chart.customLabels[0].getBBox().height / 2
      });
      ...
    }
  }
}

现场演示： https://jsfiddle.net/BlackLabel/5sro1tj9/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

圆环图，在饼图内和下方都有文本

Donut chart with text inside pie and downward as well

javascript

highcharts

donut-chart