如何在我的javascript中的任何地方访问Highcharts.stack中的总数?

时间:2014-02-20 02:48:40

标签: properties highcharts stack totals

我想将堆栈总数放在另一个div中,但我不知道如何访问它甚至将数据存储在数组中。目前,堆栈总数只能位于堆栈图表中,我希望将其放置在图表下方和标签上方。

我在http://jsfiddle.net/LX9HS/

中的代码
 $(function () {

        var categoryImgs = {
            'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        var totals = new Array();
        var i = 0;
        //totals = HighchartsAdapter

        $('#container').highcharts({
            chart: {
                type: 'column'
            },

            title: {
                text: 'Premium Summary'
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {                            
                        return '$' + this.value;
                    }
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',                                                        
                    },                        
                    format: '${total}',
                    formatter: function () {
                        totals[0] = this.point.stackTotal;
                    }
                }                    
            },            
            xAxis: {
                categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
                labels: {
                    x: 5,
                    useHTML: true,                        
                    formatter: function () {
                        return '<div class="stacktotal">$'+ totals[0] +'</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
                    },
                    events: {
                        mouseover: function () {
                            $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>Hello there</p>');
                        },
                        mouseout: function () {
                            $('#hoverboard').html('');
                        }                            
                    },
                }                    
            },

            linkedTo: 0,
            categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],

            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        },
                        format: '${y}'
                    }
                }

            },

            series: [{
                name: 'Policy Fee',
                y:'$' + this.value,
                data: [200.12, 290, 45.78, 71, 120]                    
            }, {
                name: 'WOP',
                data: [150, 210.23, 150, 200, 100]
            }, {
                name: 'Income Protection',
                data: [89, 400, 258.13, 212, 152]
            }, {
                name: 'Life Cover',
                data: [150, 210.23, 150, 200, 100]
            } ]

        });           

    });

现在显示底部未定义的总数。谢谢你的帮助!

1 个答案:

答案 0 :(得分:0)

固定!

现在正在工作。它是

totals[0] = this.total

当我尝试总计时,我可能没有添加'this'。