jquery - 在窗口调整大小时删除 Highchart 数据标签

Question

我一直在尝试使用 Highcharts 实现饼图，但我遇到了一个问题，即在非常低的分辨率下数据标签被裁剪。

我尝试使用格式化程序添加 windows.resize:function() 但失败了。

这是我目前使用的代码:

           // Radialize the colors
            Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
                return {
                    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                    ]
                };
            });

            // Build the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [

                     ]
                  },                        
                },
                title: {
                    text: 'Header Here'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 0
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Votes',
                    data: [
                        ['Vote One', 50],                   
                        ['Vote Two', 50],
                        ['Vote three', 2]
                    ]
                }]
            });

除了在调整大小时创建新图表之外，是否还有其他方法可以将标签设置为 false/hidden？并在一定分辨率以上再次显示？

非常感谢

Answer 1

您可以将数据标签的 useHTML 设置为 true，并在格式化程序中定义您自己的 div。然后，当您捕捉到调整大小事件时，使用显示/隐藏功能。

单击按钮后显示/隐藏数据标签的简单示例可在此处获得:

http://jsfiddle.net/VYGEW/

chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                        return '<div class="datalabel">' + this.y + '</div>';
                    }
                }
            }
        },
        series: [{
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    }, function (chart) {

        $('#btn').toggle(function () {

            $('.datalabel').hide();
        }, function () {
            $('.datalabel').show();
        });

    });