在高图表饼图中对文本进行响应

Question

我有一个小问题，在一个高图表饼图的文本居中。

我有一个饼形图的脚本

var chart1 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'finance-1',
                        type: 'pie'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: '',
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        pie: {
                            borderColor: null,
                            innerSize: '70%',
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    series: [{
                        data: [
                            { y: 64, color: '#283139' },
                            { y: 46, color: '#ebebeb' }
                        ]
                    }]
                },
                // using 

                function (chart1) { // on complete
                    var xpos = '50%';
                    var ypos = '50%';
                    var circleradius = 40;

                    // Render the circle
                    chart1.renderer.circle(xpos, ypos, circleradius).attr({
                        fill: '#fff',
                    }).add();

                    // Render the text 
                    chart1.renderer.text('3.900' + ' kr.', 100, 90).css({
                        width: circleradius * 2,
                        color: '#222',
                        fontSize: '18px',
                        textAlign: 'center',
                        fontFamily: 'dinotmedium',
                    }).attr({
                        // why doesn't zIndex get the text in front of the chart?
                        zIndex: 999
                    }).add();
                });

                var chart2 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'finance-2',
                        type: 'pie',
                        backgroundColor: '#ebebeb'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: '',
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        pie: {
                            borderColor: null,
                            innerSize: '70%',
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    series: [{
                        data: [
                            { y: 86, color: '#fff' },
                            { y: 14, color: '#283139' }
                        ]
                    }]
                },

这几乎是它应该做的，但是以文本为中心的文本没有响应，因为它是一个静态的位置，

chart1.renderer.text('3.900' + ' kr.', 100, 90)

当屏幕尺寸变小时，文本将移出中心。

如何将其定位在饼形图的中心与屏幕大小相对应？

Answer 1

我自己修的

title: {
        text: '3.900 kr',
        verticalAlign: 'top',
        floating: false,
        align: 'center',
        y: 80,
        style: {
           fontFamily: 'dinotmedium',
        }
},

做同样的事情，而且效果很好

Answer 2

使用redraw事件，将该文本定位在图表重绘(包括窗口大小调整)上。重要的是将呈现的文本存储在变量中。例如：

// Render the text 
chart1.myText = chart1.renderer.text('3.900' + ' kr.', 100, 90)

和redraw回调：

var chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'finance-1',
    type: 'pie',
    events: {
      redraw: function() {
          if(this.myText) {
              this.myText.attr({  
                x: new_X_position,
                y: new_Y_position,
              });
          }
      }
    }
  },
...
});