在Windows上移除Highchart数据标签调整大小 [英] Removing Highchart datalabels on windows resize

问题描述

我一直试图使用Highcharts来实现饼图，但是在裁剪出非常低的分辨率时遇到了数据标签问题。

我试图添加一个窗口使用格式化程序.resize：function（）但失败。

以下是我目前使用的代码：

  //放大颜色
 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 
] 
}; 
}）; 
 
 //构建图表
图表= new Highcharts.Chart（{
图表：{
 renderTo：'container'，
 plotBackgroundColor：null， 
 plotBorderWidth：null，
 plotShadow：false，
 backgroundColor：{
 linearGradient：[0，0，500，500]，
 stops：[
 
 
 $ b $ 
 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）+'％'; 
} 
} 
} 
}，
系列：[{
 type：'pie'，
 name：'Votes'，
 data：[
 ['Vote One'，50]，
 ['Vote Two'，50]，
 ['Vote three'，2] 
] 
}] 
}）; 
  

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

非常感谢

解决方案

您可以将useHTML设置为true来标记数据标签，并在formatter中定义您自己的div。然后，当你捕捉调整大小的事件使用显示/隐藏functons。

简单的例子显示/隐藏数据标签后点击按钮可在这里：

http://jsfiddle.net/VYGEW/

  chart = new Highcharts.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>'; 
} 
} 
} 
}，
系列：[{
 data：[7.0，6.9，9.5，14 （$）
 
 $（'＃btn'，
 
 
 
 
 
 
 
 
 
 
 $ ）.toggle（function（）{
 
 $（'。datalabel'）。hide（）; 
}，function（）{
 $（'。datalabel'）。show（）; 
}）; 
 
}）; 
  

I have been trying to implement the pie chart using Highcharts but am encountering an issue with the datalabels on very low resolutions being cropped.

I have attempted adding a windows.resize withing the formatter: function() but that failed.

Here is the code I am currently using:

           // 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]
                    ]
                }]
            });

Is there anyway other than creating a new chart on resize that the labels can be set to false / hidden? and shown again above a certain resolution?

Many thanks

解决方案

You can set useHTML as true for datalabels and in formatter define your own divs. Then when you catch resize event use show / hide functons.

Simple example which show/hide datalabels after click button is available here:

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();
        });

    });

这篇关于在Windows上移除Highchart数据标签调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！