javascript - 扩展 Highcharts show() 和 hide() 函数

Question

在 Highcharts 中扩展 show() 和 hide() 函数的最佳方法是什么？

我想添加一个类似 bool 值的 show(effectLinkedSeries) 和 hide(effectLinkedSeries)，这样我就可以控制何时删除或添加 linkedSeries 及其“家长”。这是 linkedSeries functionality 的演示。名为“linkedTo”的属性设置功能:

series: [{
            name: 'Temperature',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }, {
            name: 'Range',
            data: ranges,
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }]

我可以修改 source directly但我宁愿尝试扩展该库，而不是破解它。

Answer 1

发现我可以利用 Highcharts.Series.prototype 来完成此任务

Highcharts.Series.prototype.setVisible = function (vis, redraw, effectLinkedSeries) {
        var series = this,
            chart = series.chart,
            legendItem = series.legendItem,
            showOrHide,
            ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries,
            oldVisibility = series.visible;

        // if called without an argument, toggle visibility
        series.visible = vis = series.userOptions.visible = vis === Highcharts.UNDEFINED ? !oldVisibility : vis;
        showOrHide = vis ? 'show' : 'hide';

        // show or hide elements
        Highcharts.each(['group', 'dataLabelsGroup', 'markerGroup', 'tracker'], function (key) {
            if (series[key]) {
                series[key][showOrHide]();
            }
        });


        // hide tooltip (#1361)
        if (chart.hoverSeries === series || (chart.hoverPoint && chart.hoverPoint.series) === series) {
            series.onMouseOut();
        }


        if (legendItem) {
            chart.legend.colorizeItem(series, vis);
        }


        // rescale or adapt to resized chart
        series.isDirty = true;
        // in a stack, all other series are affected
        if (series.options.stacking) {
            Highcharts.each(chart.series, function (otherSeries) {
                if (otherSeries.options.stacking && otherSeries.visible) {
                    otherSeries.isDirty = true;
                }
            });
        }

        // show or hide linked series
        Highcharts.each(series.linkedSeries, function (otherSeries) {
            if (effectLinkedSeries === true) {
              otherSeries.setVisible(vis, false);
            }
        });

        if (ignoreHiddenSeries) {
            chart.isDirtyBox = true;
        }
        if (redraw !== false) {
            chart.redraw();
        }

        Highcharts.fireEvent(series, showOrHide);
}; // end Highcharts.Series.prototype.setVisible

Highcharts.Series.prototype.show = function (effectLinkedSeries) {
        this.setVisible(true,undefined,effectLinkedSeries);
};

Highcharts.Series.prototype.hide = function (effectLinkedSeries) {
        this.setVisible(false,undefined,effectLinkedSeries);
};