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

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

Answer 2

自己修正

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

做同样的事情并且完美地运作

将响应中的文本置于高图派中心

2 个答案: