隱藏和顯示海圖傳奇

Question

我的海圖上有很多傳說。 我編寫了一個在圖例的可見性之間切換的函數。 以下是我的代碼：

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;

我通過從Ajax服務接收的數據來綁定此圖表

var chart = generateChart(id, xText, yText);
.
.
.
chart.addSeries({
        color: colorCoode,
        data: seriesData,
        name: seriesName
});

第一次加載頁面時，該圖表工作正常。 我有一個按鈕，可以調出上面的代碼並更新圖表數據。

但是，當我嘗試隱藏重新加載的圖表的圖例時，會出現以下錯誤。

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

有人可以指導我為什么會出現此錯誤嗎？

編輯

我在jsfiddle上提供了一個實時示例。 這就是我正在談論的例子。 http://jsfiddle.net/9x4vmqyj/6/

 $(function() { BindChart('container', 'EP No.6', 'EP No.7', '12', '13', '1429', '1449', 'Ring'); $("#btnReGenerate").click(function() { var minring = 1429; var maxring = 1449; BindChart('container', 'EP No.6', 'EP No.7', '12', '13', minring, maxring, 'Ring'); }); }); function generateChart(divId, xText, yText) { var options = ({ chart: { type: 'scatter', zoomType: 'xy', renderTo: divId, }, title: { text: 'Correlation 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 />', pointFormat: 'Ring No.: <b>{point.ring}</b><br />' + 'Chainage: <b>{point.chainage}</b><br />' + xText + ': <b>{point.x}</b><br />' + yText + ': <b>{point.y}</b>' } } } }); 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; } function BindChart(id, xText, yText, xLoop, yLoop, startRing, endRing, type) { var chart = generateChart(id, xText, yText); var serviceurl = "/Analysis/CorrelationRingData"; if (type == "Chainage") { serviceurl = "/Analysis/CorrelationChainageData"; } var result = getJson(); if (result.Success == true) { var seriesData = {}; var geoClrCodes = {}; if (result.Geologies != null && result.Geologies !== undefined) { $.each(result.Geologies, function(i, geo) { geoClrCodes[geo.GeoID] = geo; }); } if (result.GeoIDs != null && result.GeoIDs !== undefined) { for (i = 0; i < result.GeoIDs.length; i++) { seriesData[result.GeoIDs[i]] = []; } } else { seriesData[0] = []; ringChainage[0] = []; } $.each(result.Data, function(i, item) { //console.log(item); var xVal = Math.round(parseFloat(item.XValue) * 1000) / 1000; var yVal = Math.round(parseFloat(item.YValue) * 1000) / 1000; var chainageVal = Math.round(parseFloat(item.ChianageValue) * 1000) / 1000; //console.log(item.ChainageValue + ", " + chainageVal); var series = 0; if (item.GeoId != null && item.GeoId !== undefined) { series = parseInt(item.GeoId); } //seriesData[series].push([xVal, yVal]); seriesData[series].push({ x: xVal, y: yVal, ring: item.RingNo, chainage: chainageVal }); }); for (j in seriesData) { if (seriesData[j] !== undefined) { if (seriesData[j].length > 0) { var colorCoode = "#a" + j + "a" + j + "a" + j; var seriesName = ""; if (geoClrCodes[j] != null && geoClrCodes[j] !== undefined) { colorCoode = "#" + geoClrCodes[j].GeoClrCode; seriesName = geoClrCodes[j].GeoNm; } chart.addSeries({ color: colorCoode, data: seriesData[j], name: seriesName }); } } } } else { console.log("NO DATA:" + result.Message); } } function getJson() { return { "Data": [{ "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.587, "YValue": 2.9210000000000003, "XLoop": 12, "YLoop": 13, "ChianageValue": 16092.082999991731, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1429, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.548, "YValue": 4.66, "XLoop": 12, "YLoop": 13, "ChianageValue": 16093.410999992002, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1430, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.576, "YValue": 0.597, "XLoop": 12, "YLoop": 13, "ChianageValue": 16094.747999991927, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1431, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.306, "YValue": 0.784, "XLoop": 12, "YLoop": 13, "ChianageValue": 16096.091999991793, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1432, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 0.95000000000000007, "YValue": 0.795, "XLoop": 12, "YLoop": 13, "ChianageValue": 16097.363999991667, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1433, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.822, "YValue": 2.071, "XLoop": 12, "YLoop": 13, "ChianageValue": 16098.420999991608, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1434, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.084, "YValue": 0.233, "XLoop": 12, "YLoop": 13, "ChianageValue": 16099.736999991534, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1435, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.779, "YValue": 4.752, "XLoop": 12, "YLoop": 13, "ChianageValue": 16100.940999991466, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1436, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 0.223, "YValue": 4.477, "XLoop": 12, "YLoop": 13, "ChianageValue": 16102.024999991687, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1437, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.646, "YValue": 4.822, "XLoop": 12, "YLoop": 13, "ChianageValue": 16103.050999991585, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1438, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.714, "YValue": 0.911, "XLoop": 12, "YLoop": 13, "ChianageValue": 16104.072999991528, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1439, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.329, "YValue": 2.622, "XLoop": 12, "YLoop": 13, "ChianageValue": 16105.150999991467, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1440, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.5340000000000003, "YValue": 0.95100000000000007, "XLoop": 12, "YLoop": 13, "ChianageValue": 16106.3339999914, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1441, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 0.82400000000000007, "YValue": 2.794, "XLoop": 12, "YLoop": 13, "ChianageValue": 16107.641999991667, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1442, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.227, "YValue": 1.057, "XLoop": 12, "YLoop": 13, "ChianageValue": 16109.003999991532, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1443, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.873, "YValue": 2.472, "XLoop": 12, "YLoop": 13, "ChianageValue": 16110.163999991346, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1444, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.196, "YValue": 2.859, "XLoop": 12, "YLoop": 13, "ChianageValue": 16111.307999991319, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1445, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.763, "YValue": 4.718, "XLoop": 12, "YLoop": 13, "ChianageValue": 16112.504999991252, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1446, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.876, "YValue": 4.615, "XLoop": 12, "YLoop": 13, "ChianageValue": 16113.592999991473, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1447, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.334, "YValue": 4.964, "XLoop": 12, "YLoop": 13, "ChianageValue": 16114.858999991347, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1448, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.451, "YValue": 1.49, "XLoop": 12, "YLoop": 13, "ChianageValue": 16115.862999991297, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1449, "GeoId": 23 }], "Success": true, "X": 12, "Y": 13, "GeoIDs": [23], "Geologies": [{ "GeoID": 23, "GeoNm": "Others", "GeoClrCode": "7030A0", "LastUpdate": null, "UpdateById": null, "ErrorMessage": null }] }; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <a href="#" id="btnShowHide">Hide legend</a> <br /> <a href="#" id="btnReGenerate">Regenerate</a> <div id="container" style="height: 400px"></div> 

這是堆棧溢出的實時代碼。 請幫助，因為此功能對於項目非常必要。

Answer 1

我無法確切告訴您是什么阻止了變量的傳遞，但是正如我所提到的，這似乎是范圍的問題。

重新生成圖表后，您從其中調用隱藏/顯示邏輯的click函數無法訪問chart變量。

通過

1. 將chart和legend變量的聲明移到所有函數之外
2. 從函數中刪除click事件處理程序
3. 從Highcharts回調中刪除該函數的綁定，

一切似乎正常：

• http://jsfiddle.net/jlbriggs/9x4vmqyj/11/

我敢肯定還有其他方法可以使它正常工作，但是您的設置相當復雜-似乎過於復雜，但是也許在其他情況下也需要如此復雜...

Answer 2

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