Question

我正在尝试将一些文本放入highcharts.js甜甜圈元素的中心，但经过两个小时的研究后没有成功。看起来像一些简单的CSS将完成这项工作，但无法弄清楚正确的语法。请帮助!!!

$(function() {
  $('#order_suggestions_graph_by_vendor').highcharts({
    credits: {
      enabled: false
    },
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    plotOptions: {
      pie: {
        innerSize: '60%'
      }
    },
    title: {
      text: 'Browser<br>shares<br>2015',
      align: 'center',
      verticalAlign: 'middle',
      y: 40
    },
    series: [{
      type: 'pie',
      name: 'Browser share',
      innerSize: '50%',
      data: [
        ['Firefox', 10.38],
        ['IE', 56.33],
        ['Chrome', 24.03],
        ['Safari', 4.77],
        ['Opera', 0.91], {
          name: 'Proprietary or Undetectable',
          y: 0.2,
          dataLabels: {
            enabled: false
          }
        }
      ]
    }]

  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div>
  <div id="order_suggestions_graph_by_vendor"></div>
</div>

Answer 1

您目前正在将该标题降低40px。要不这样做，只需将y位置偏移设置为0：

title: {
  text: 'Browser<br>shares<br>2015',
  align: 'center',
  verticalAlign: 'middle',
  y: 40 // change this to 0
}

Amended JSFiddle demo

Highcharts.js - 将文本放入甜甜圈的中心

1 个答案: