美文网首页
Highcharts 添加返回按钮

Highcharts 添加返回按钮

作者: ettingshausen | 来源:发表于2016-12-08 10:06 被阅读295次

完整代码

$('#id_chart_right').highcharts({
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(0,0,0,0)',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                },
                events: {
                    load: function (event) {
                        var total = 0;
                        for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                            total += this.series[0].yData[i];
                        }
                        var text = this.renderer.text(
                            '总人数: ' + total + '人',
                            this.plotLeft + 20,
                            this.plotTop + 20
                        ).attr({
                            zIndex: 5
                        }).css({
                            color: '#4572A7',
                            fontSize: '16px',
                            fontWight: ''
                        }).add();
                        if (data.dept) {
                            var button = this.renderer.button(
                                '返回',
                                this.plotLeft + 420,
                                this.plotTop,
                                function () {
                                    getData4RightChart($('#date').find('.selected').find('.year').html(), '')
                                        .then(updateRightCharts);
                                    getTitle('');
                                }
                            ).attr({
                                zIndex: 5
                            }).add();
                        }
                    }

                }

            },
            title: {
                text: ''
            },
            tooltip: {
                headerFormat: '<small>{point.key}:</small><b><small> {point.y}人</small></b><br>',
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            legend: {

                borderWidth: 0,
                itemStyle: {
                    color: '#00637A'
                },
                itemHoverStyle: {color: '#00637A'}
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                        style: {
                            color: '#00637A',
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            series: data.data
        });
    };

相关文章

网友评论

      本文标题:Highcharts 添加返回按钮

      本文链接:https://www.haomeiwen.com/subject/fvojmttx.html