Javascript 隐藏和显示highchart图例

我有一张有很多传奇的海图。我编写了一个函数来在图例的可见性之间切换。以下是我的代码：

function generateChart(divId, xText, yText) {
var options = ({
    chart: {
        type: 'scatter',
        zoomType: 'xy',
        renderTo: divId,

    },
    title: {
        text: 'Scatter Chart'
    },

    xAxis: {
        title: {
            enabled: true,
            text: xText
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: yText
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 18,
        floating: true,
        backgroundColor: 'rgba(211,223,181,0.4)',
        borderWidth: 1,
        enabled: true,

    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br />'

            }
        }
    }
});
function showHideHandler(chart) {
    $("#btnShowHide").click(function (e) {
        var legend = chart.legend;
        if (legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
            $("#btnShowHide").text("Show Legend");
        }
        else {
            legend.group.show();
            legend.box.show();
            legend.display = true;
            $("#btnShowHide").text("Hide Legened");
        }
    });
}
var chart = new Highcharts.Chart(options, showHideHandler);    
return chart;

首先加载页面时，图表工作正常。我有一个按钮，它可以调用上面的代码，并更新图表数据

但是当我试图隐藏重新加载的图表的图例时，它给出了以下错误

TypeError: legend is undefined
if (legend.display) {

有人能告诉我为什么我会犯这个错误吗

编辑

我在jsfiddle上提供了一个实例。这就是我所说的例子

$function{ BindChart‘容器’、‘EP　第6号“EP”　第7、12、13、1429、1449、环号； $btnReGenerate.clickfunction{ var minring=1429； var-maxring=1449； BindChart‘集装箱’、‘EP第6号’、‘EP　第7、12、13、minring、maxring、Ring号； }; }; 函数generateChartdivId，xText，yText{ 变量选项={ 图表：{ 键入：“散布”， zoomType:'xy'， renderTo:divId， }, 标题：{ 文本：“相关图” }, xAxis：{ 标题：{ 启用：对， 文本：xText }, 是的， 恩东蒂克：是的， showLastLabel:true }, 亚克斯：{ 标题：{ 文本：yText } }, 图例：{ 布局：“垂直”， 对齐：“右”， 垂直排列：“顶部”， x:0,， y:18， 浮动：是的， 背景颜色：“RGBA21122123181,0.4”， 边框宽度：1， 启用：对， }, 打印选项：{ 散布：{ 标记：{ 半径：5， 国家：{ 悬停：{ 启用：对， 线条颜色：“RGB100100” } } }, 国家：{ 悬停：{ 标记：{ 已启用：false } } }, 工具提示：{ headerFormat:“{series.name}”， pointFormat:'环号：{point.Ring}'+'链测长度：{point.chaineage}'+xText+':{point.x}'+yText+':{point.y}' } } } }; 函数显示HideHandlerChart{ $btnShowHide.clickFunction{ 变量图例=chart.legend； 如果图例显示{ legend.group.hide； legend.box.hide； legend.display=false； $btnShowHide.text显示图例； }否则{ legend.group.show； legend.box.show； legend.display=true； $btnShowHide.textHide Legened； } }; } var chart=新的Highcharts.Chartoptions，showHideHandler； 收益表； } 函数BindChartid、xText、yText、xLoop、yLoop、startRing、endRing、type{ var图表=generateChartid、xText、yText； var serviceurl=/Analysis/CorrelationRingData； 如果类型==链测长度{ serviceurl=/Analysis/correlationchaineagedata； } var result=getJson； if result.Success==true{ var seriesData={}； var geocclrcodes={}； 如果result.Geologies！=null&&result.Geologies！==未定义{ $.eachresult.Geologies、functioni、geo{ geocrCodes[geo.GeoID]=geo； }; } 如果result.GeoIDs！=null&&result.GeoIDs！==未定义{ 对于i=0；i0{ var colorCoode=a+j+a+j+a+j； var seriesName=； 如果geoClrCodes[j]！=null&&geoClrCodes[j]！==未定义{ colorCoode=+geoClrCodes[j]。GeoClrCode； seriesName=geoClrCodes[j].GeoNm； } chart.addSeries{ 颜色：colorCoode， 数据：系列数据[j]， 名称：seriesName }; } } } }否则{ console.logNO数据：+result.Message； } } 函数getJson{ 返回{ 数据：[{ XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.587， Y值：292.100000000003， XLoop:12， 洛普：13， ChianageValue:16092.08299991731， RelativeGeoID:null， GeologyCr:null， 电话号码:1429,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼 t:酒吧， 类型：RingPv， XValue:2.548， Y值：4.66， XLoop:12， 洛普：13， ChianageValue:16093.4109999002， RelativeGeoID:null， GeologyCr:null， 电话号码:1430,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:2.576， Y值：0.597， XLoop:12， 洛普：13， ChianageValue:16094.7479999927， RelativeGeoID:null， GeologyCr:null， 电话号码:1431,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:2.306， Y值：0.784， XLoop:12， 洛普：13， ChianageValue:16096.091999991793， RelativeGeoID:null， GeologyCr:null， 电话号码:1432,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:0.95000000000000007， Y值：0.795， XLoop:12， 洛普：13， ChianageValue:16097.363999991667， RelativeGeoID:null， GeologyCr:null， 电话号码:1433,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.822， Y值：2.071， XLoop:12， 洛普：13， ChianageValue:16098.4209991608， RelativeGeoID:null， GeologyCr:null， 电话号码:1434,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.084， Y值：0.233， XLoop:12， 洛普：13， ChianageValue:16099.736999991534， RelativeGeoID:null， GeologyCr:null， 电话号码:1435,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:2.779， Y值：4.752， XLoop:12， 洛普：13， ChianageValue:16100.940999991466， RelativeGeoID:null， GeologyCr:null， 电话号码:1436,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:0.223， Y值：4.477， XLoop:12， 洛普：13， ChianageValue:16102.024999991687， RelativeGeoID:null， GeologyCr:null， 电话号码:1437,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:4.646， Y值：4.822， XLoop:12， 洛普：13， ChianageValue:16103.05099991585， RelativeGeoID:null， GeologyCr:null， 电话号码:1438， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.714， Y值：0.911， XLoop:12， 洛普：13， ChianageValue:16104.07299991528， RelativeGeoID:null， GeologyCr:null， 电话号码:1439， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:2.329， Y值：2.622， XLoop:12， 洛普：13， ChianageValue:16105.1509991467， RelativeGeoID:null， GeologyCr:null， 电话号码:1440,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:2.5340000000000003， Y值：0.9510000000000007， XLoop:12， 洛普：13， ChianageValue:16106.33399914， RelativeGeoID:null， GeologyCr:null， 电话号码:1441,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:0.82400000000000007， Y值：2.794， XLoop:12， 洛普：13， ChianageValue:16107.64199999167， RelativeGeoID:null， GeologyCr:null， 电话号码:1442,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:4.227， Y值：1.057， XLoop:12， 洛普：13， ChianageValue:16109.0039991532， RelativeGeoID:null， GeologyCr:null， 电话号码:1443,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:2.873， Y值：2.472， XLoop:12， 洛普：13， ChianageValue:16110.16399991346， RelativeGeoID:null， GeologyCr:null， 电话号码:1444,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.196， Y值：2.859， XLoop:12， 洛普：13， ChianageValue:16111.30799991319， 相对论 D:空， GeologyCr:null， 电话号码:1445,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:4.763， Y值：4.718， XLoop:12， 洛普：13， ChianageValue:16112.50499991252， RelativeGeoID:null， GeologyCr:null， 电话号码:1446,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:4.876， Y值：4.615， XLoop:12， 洛普：13， ChianageValue:16113.59299991473， RelativeGeoID:null， GeologyCr:null， 电话号码:1447,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.334， Y值：4.964， XLoop:12， 洛普：13， ChianageValue:16114.858999991347， RelativeGeoID:null， GeologyCr:null， 电话号码:1448,， 大地水准面：23 }, { XLabel:EP　第六,， 许妮特：酒吧， 伊拉贝尔：EP　第七， 尤尼特：酒吧， 类型：RingPv， XValue:1.451， Y值：1.49， XLoop:12， 洛普：13， ChianageValue:16115.86299991297， RelativeGeoID:null， GeologyCr:null， 电话号码:1449,， 大地水准面：23 }], 成功：没错， X:12， Y:13， 大地水准面：[23]， 地质学家：[{ 大地水准面：23， GeoNm：其他人， 地理编码：7030A0， LastUpdate:null， UpdateById:null， 错误消息：空 }] }; }

---

我不能确切地告诉你是什么阻止了变量的传递，但正如我提到的，这似乎是一个范围问题

重新生成图表后，调用隐藏/显示逻辑的click函数无法访问图表变量

借

移动图表和图例变量的声明 在所有职能之外 从函数中删除单击事件处理程序 从Highcharts回调中删除该函数的绑定， 一切似乎都正常：

---

我确信还有其他方法可以让它工作，但您的设置相当复杂-似乎过于复杂，但可能还有其他情况需要如此复杂…

请查看我的代码，它有一个滚动条，我已经在使用它，可能是“chart”变量的范围问题？设置var图；首先在任何功能之外？一个活生生的例子会更容易诊断我很抱歉@jlbiggs的延迟这里是我正在做的一个活生生的演示。单击“重新生成”按钮时，“隐藏显示”无法工作。小提琴链接在这里：@jlbriggs你能帮忙吗？

TypeError: legend is undefined
if (legend.display) {

$('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });