Question

我创建了以下饼图：

我想将饼图中的数字“100”居中，并在调整窗口大小时使其响应。目前，文本居中，但没有响应。

function(chart) { // on complete
        var textX = chart.plotLeft + (chart.series[0].center[0]);
        var textY = chart.plotTop  + (chart.series[0].center[1]);

        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
        span += '<span style="font-size: 32px">Upper</span><br>';
        span += '<span style="font-size: 16px">Lower</span>';
        span += '</span>';

        $("#container").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5));
    }

Answer 1

将数字“100”放入字幕并居中。而不是使用@Jake开发的函数，在渲染图表后将数字“100”添加到图表中，最好通过Highcharts.js渲染此数字。其中一种可能的方法是在Highcharts.Chart中使用subtitle字段。如下例所示，您应将其设置为align: 'center', verticalAlign: 'middle'。这将使您的号码居中，并且会有响应。

应该是您问题的解决方案： http://jsfiddle.net/6Ljnkmwe/5/

$(function() {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    plotOptions: {
        pie: {
            innerSize: '40%'
        }
    },
    title: {
        text: 'Browser Series Chart'
    },
    subtitle: {
            text: '150',
            align: 'center',
            verticalAlign: 'middle',
                            style: { "fontSize": "22px" },
                            y: 15
            },
    credits: { enabled: false},
    series: [{
        data: [
            ['Firefox', 2262],
            ['IE7', 3800],
            ['IE6', 1000],
            ['Chrome', 1986]
            ]}]
});
});

Highcharts - 使饼图内的文字响应

1 个答案: