Question

这是我最后一个问题的延续，我大部分已经解决了。

我试图弄清楚动画完成后如何在图表上渲染文字。

我是这样的菜鸟，但我正在努力。文本渲染器功能在最后工作，但如果我放入一个完整的功能，它不会。我在这一点上真的很困惑。

这是我的小提琴。

$("#profit-chart").highcharts({

        lang: {
            thousandsSep: ","
        },
        chart: {
            spacingRight: 220,
            type: "column",
            width: 1200,
            style: {
                fontFamily: "Open Sans, sans-serif"
            }
        },
        animation: {
            complete:function(chart) {
                chart.renderer.text('<span class="bracketed">}</span>  <em>Equity Advantage</em>', 800, 84)
                    .css({
                        color: 'green',
                        fontSize: '24px',
                        x: 200
                    }).add();
                }
         },

         legend: {
            enabled: false
        },
        title: {
            text: ""
        },
        xAxis: {
            //minPadding: 20, Not working here
            //maxPadding:1, Not working here either
            categories: [ "other business", "somekind of business profit" ],
            labels: {
                style: {
                    color: "#333333",
                    fontSize: "15px"
                }
            }
        },
        yAxis: {
            gridLineDashStyle: "longdash",
            title: {
                text: "Dollars"
            },
            labels: {
                enabled: true,
                formatter: function() {
                    return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
                }
            }
        },
        tooltip: {
            enabled: false
        },

        plotOptions: {


            column: {
                stacking: "normal",
                dataLabels: {
                    enabled: true,
                    color: "white",
                    inside: true,
                    useHTML: true,
                    style: {
                        fontSize: "18px",
                        fontWeight: "600"
                    }
                }
            },
            series: {
                pointPadding: 0.05,
                //groupPadding: 0, this does not work
            }
        },

        series: [ {
            color: "#327631",
            data: [ 0, 850 ],
            stack: "female",
            dataLabels: {
                enabled: true,
                formatter: function() {
                    if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0); 


                    else return null;
                }
            }

            }, {
            color: "#ADC9AD ",
            data: [ 10000, 10000 ],
            stack: "female",
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return "$" + Highcharts.numberFormat(this.y, 0);
                }
            }
        }]
        /*
        This is where it renders the text - it works but is on screen before animation.
        //},

        function (chart) { // on complete

                        chart.renderer.text('<span class="bracketed">}</span>  <em>Equity Advantage</em>', 800, 84)
                            .css({
                                color: 'green',
                                fontSize: '24px',
                                x: 200
                            }).attr ({
                                zIndex: 20
                            })
                            .add();


        */




    });//End HighCharts Call

Answer 1

你有正确的想法使用动画完成事件，但你有错误的配置选项。

它应该在：

plotOptions: {
    series: {
        animation: {
             complete:  function () {
             }
        }
    }
}

更新fiddle。

Highcharts动画后渲染文本

1 个答案: