Question

我正在尝试在我的highcharts甜甜圈饼图中实现居中的多行文字。我希望第一行的字体大小为50px，第二行的字体大小为25px。

目前，我无法在每一行上获得不同的字体大小，也无法将文本放在中心位置。

以下是我如何渲染标题

 var r = this.renderer,
        x = this.series[0].center[0] + this.plotLeft,
        y = this.series[0].center[1] + this.plotTop;
      this.title = r.text('Top<br>Bottom', 0, 0)
        .css({
          fontSize: '25px',
          textAlign: "center",
        }).hide()
        .add();

Answer 1

使用renderer

更新textAnchor:'middle'

 this.title = r.text('1,234 <br> <span style="font-size:25px">Calls Today</span>', 0, 0)
    .css({
      fontSize: '40px',
      textAnchor:'middle'
    }).hide()
    .add();

$(function() {

  Highcharts.setOptions({
    colors: ['#79CEB8', '#66041A', '#0099CC', '#1D3461']
  });

  var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'pie'
      },
      title: {
        align: 'center',
        verticalAlign: 'middle'
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      plotOptions: {
        pie: {
          shadow: false
        }
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
        }
      },
      series: [{
        name: 'Browsers',
        data: [
          ["Bypass", 10],
          ["No IVR", 20],
          ["Handled", 7],
          ["Required Operator", 7]
        ],
        size: '100%',
        innerSize: '80%',
        showInLegend: false,
        dataLabels: {
          enabled: true
        }
      }]
    },
    function addTitle() {

      if (this.title) {
        this.title.destroy();
      }

      var r = this.renderer,
        x = this.series[0].center[0] + this.plotLeft,
        y = this.series[0].center[1] + this.plotTop;
      this.title = r.text('1,234 <br> <span style="font-size:25px">Calls Today</span>', 0, 0)
        .css({
          fontSize: '40px',
          textAnchor: 'middle'
        }).hide()
        .add();

      var bbox = this.title.getBBox();
      this.title.attr({
        x: x - (bbox.width / 100),
        y: y
      }).show();
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width:c310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

甜甜圈饼图内的highcharts多行文字

1 个答案: