时间戳

首页 > 解决方案 > 圆环图，在饼图内和向下也有文本

javascript - 圆环图，在饼图内和向下也有文本

问题描述

我想创建一个这样的图表在此处输入图像描述

我已经这样创建了

此处添加的文本是明确的，顶部和左侧是固定的。我希望它是响应式的。即当屏幕尺寸改变时移动。有办法吗？在 highchart 文档中，只有 name 属性没有给出 title 属性。我的代码在这里给出 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
            }
        }]
    });
});

标签： javascripthighchartsdonut-chart

解决方案

您可以使用Highcharts.SVGRenderer该类并在具有计算位置的图表上呈现自定义 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

推荐阅读