扩展Highchart的show()和hide()函数

时间:2016-07-21 18:39:42

标签: javascript highcharts

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

我想添加一个类似布尔值的show(effectLinkedSeries)hide(effectLinkedSeries),这样我就可以控制何时删除或添加了一个linkSeries以及它的" parent"。这是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,但我宁愿尝试扩展库,而不是黑客攻击。

1 个答案:

答案 0 :(得分: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);
};