Блог

Главная - Вопросы по программированию - Highcharts.js — размещение текста в центре пончика

Highcharts.js — размещение текста в центре пончика

#css #highcharts

#css #высокие диаграммы

Вопрос:

Я пытаюсь поместить некоторый текст в центр 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>

Ответ №1:

В настоящее время вы уменьшаете заголовок на 40 пикселей. Чтобы не делать этого, просто установите смещение y положения равным 0:

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

Исправлена демонстрация JSFiddle.

Комментарии:

1. @EdgarNavasardyan Я немного изменил свой ответ. Это относится как к старому JSFiddle, так и к новому.

2. Ну, кажется, еще есть какая-то проблема: ( jsfiddle.net/g4tb1z7c

3. @EdgarNavasardyan ты этого не y делал 0 . Вот, пожалуйста: jsfiddle.net/g4tb1z7c/1

4. Он центрирован по вертикали, но выравнивание по горизонтали по-прежнему не центрировано

5. @EdgarNavasardyan Я не уверен, в чем проблема, для меня она выглядит как по вертикали, так и по горизонтали (Chrome v53).

Метки: