Question

在此示例http://www.highcharts.com/demo/pie-legend

中

标签点击，切片饼图的一部分。我需要设置可见的单击饼图部分，但当我使用setVisible函数时，我有默认行为，除非我返回false，例如。

       pie: {
                point: {
                    events: {
                        legendItemClick: function (event) {
                            var visibility = this.visible;

                            this.setVisible(!visibility);

                            return false;
                        }
                    }
                },
            }

Answer 1

您可以使用设置为ignoreHiddenPoint的{{1}}选项，在图例中停用切片区域后将其保持打开状态。

示例代码（JSFiddle）：

false

Answer 2

看看这是否适合你：

    series: {
        point: {
            events: {
                legendItemClick: function () {
                    var colors = this.series.chart.options.colors;
                    var newColor = (
                        this.color == 'transparent' 
                        ? colors[this.index] 
                        : 'transparent'
                    );
                    this.update({color:newColor});
                    return false; 
                }
            }
        }
    }

在图例项目上单击，它会将点的颜色更新为“透明”。

示例：

http://jsfiddle.net/jlbriggs/g15uduwu/

[[使用更新的代码进行编辑，以便返回原始颜色]]

Answer 3

您需要捕获legendItemClick并自定义操作，并在事件中返回FALSE。

legendItemClick: function () {
                            var point = this,
                                vis;

                            point.visible = point.options.visible = vis = vis === UNDEFINED ? !point.visible : vis;
                             this.series.chart.legend.colorizeItem(point, vis);

                            if(vis) {
                                point.graphic.attr({
                                    opacity:1
                                });
                                point.dataLabel.show();
                                point.connector.show();
                            } else {
                                point.graphic.attr({
                                    opacity:0
                                });
                                point.dataLabel.hide();
                                point.connector.hide();
                            }

                            return false;
                        }

示例：http://jsfiddle.net/x65f5qaz/1/

单击legendItem后如何在highcharts中保留空切片区域

3 个答案: