Question

当我的工具提示鼠标悬停在系列上时，我正在尝试动态更新我的饼图中心的文本。

通过在图表的工具提示字段中使用格式化程序，我可以调用一个单独的函数，但似乎文本没有更新。

这是我的小提琴Pie Chart

$(function () {

var chartTitle = "Text in the Pie";
var colors = Highcharts.getOptions().colors;
var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container1',
        type: 'pie'
    },
    title: {
        text: 'Pie Pie Pie',
        y: 20,
        verticalAlign: 'top'
    },
    tooltip: {
        //pointFormat: '{series.name}: <b>{point.percentage}%</b>'
        formatter: function () {
            chartTitle = this.series.name + '/n' + this.point.percentage.toFixed(2) + '%';
            refreshText(this);
            return '<b>' + this.series.name + '</b>: ' + this.point.percentage;
        }
    },
    plotOptions: {
        pie: {
            borderColor: 'white',
            innerSize: '60%',
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [{
        data: [{
            y: 59,
            color: '#005C7F',
            name: 'Chrome'
        }, {
            y: 41,
            color: '#4CCDFF'
        }, {
            y: 61,
            color: '#00B8FF'
        }, {
            y: 52,
            color: '#26677F'
        }],

        size: '80%',
        innerSize: '60%'
    }]
},
function (chart1) { // on complete
    var xpos = '50%';
    var ypos = '50%';
    var circleradius = 130;

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

    // Render the text 
    //chart1.renderer.text(chart1.series[0].data[0].percentage.toFixed(2) + '%', 270, 200).css({
    chart1.renderer.text(chartTitle + '%', 230, 200).css({
        width: circleradius * 2,
        color: '#FFFFFF',
        fontSize: '16px',
        textAlign: 'center'
    }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();
}


);


function refreshText(chart1) {

    alert("inside refreshText() function");
    var xpos = '50%';
    var ypos = '50%';
    var circleradius = 130;

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


    chart1.renderer.text(chartTitle + '%', 270, 200).css({
        width: circleradius * 2,
        color: '#FFFFFF',
        fontSize: '16px',
        textAlign: 'center'
    }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();


}

}）;

Answer 1

仅供参考，您在工具提示中调用了refreshChart（this）。你只需要调用refreshChart（chart1）来使刷新工作，尽管你没有清除渲染器。

tooltip: {
        //pointFormat: '{series.name}: <b>{point.percentage}%</b>'
        formatter: function () {     

            chartTitle = this.series.name + '/n' + this.point.percentage.toFixed(2) + '%';

            refreshText(chart1);
            return '<b>' + this.series.name + '</b>: ' + this.point.percentage;
        }
    },

http://jsfiddle.net/2qV9K/

通过Highcharts Piechart中的工具提示更新文本动态

1 个答案: