将 highchart pie 中的文本居中放在响应式上

Question

我在 highchart 饼图中将文本居中有一个小问题。

我有这个饼图脚本

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

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

// 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,
              });
          }
      }
    }
  },
...
});

Answer 2

我自己修好了

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

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

将 highchart pie 中的文本居中放在响应式上

centering text in highchart pie on responsive

javascript

html

charts

highcharts