为什么饼图在setTitle方法之后会增加大小?

时间:2015-12-29 15:36:25

标签: javascript jquery highcharts

事件重绘调用setTitle方法,我用方法更新数据:

donutChart.series[0].setData(donutSeries);

图表的大小增加。我不需要这样的行为,但我需要动态更改标题。

var chart;
$(function() {
  $('#ebtDonutChart1').highcharts({
    chart: {
      type: 'pie',
      events: {
        load: function() {
          var total = 0;
          chart = this;
          var items = chart.series[0].data;
          for (var i = 0; i < items.length; i++) {
            total += items[i].y;
          }

          chart.setTitle({
            text: "<b>" + total.toString() + "</b>" + "<br/>" + " M €",
            align: 'center',
            verticalAlign: 'middle',
            y: 15,
            style: {
              color: '#666666',
              fontSize: '35px'
            }
          });
        }
      }
    },
    plotOptions: {
      pie: {
        innerSize: 100,
        depth: 45
      }
    },
    series: [{
      name: 'Delivered amount',
      data: [
        ['Bananas', 8],
        ['Kiwi', 3],
        ['Mixed nuts', 1],
        ['Oranges', 6],
        ['Apples', 8],
        ['Pears', 4],
        ['Clementines', 4],
        ['Reddish (bag)', 1],
        ['Grapes (bunch)', 1]
      ],
      states: {
        hover: {
          halo: {
            size: 0
          }
        }
      }
    }]
  });
  $("#button").click(function(e) {
    chart.series[0].setData([
      ['Bananas', 8],
      ['Kiwi', 3],
      ['Mixed nuts', 1],
      ['Oranges', 6],
      ['Apples', 8],
      ['Pears', 4],
      ['Clementines', 4],
      ['Reddish (bag)', 1],
      ['Grapes (bunch)', 1]
    ]);
    var total = 0;
    var items = chart.series[0].data;
    for (var i = 0; i < items.length; i++) {
      total += items[i].y;
    }

    chart.setTitle({
      text: "2",
      align: 'center',
      verticalAlign: 'middle',
      y: 15,
      style: {
        color: '#666666',
        fontSize: '35px'
      }
    });
  });
});
<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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<button id="button">Button</button>
<div id="ebtDonutChart1"></div>

0 个答案:

没有答案