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

我无法准确地告诉你什么阻止了变量的传递，但正如我所提到的那样，它似乎是一个范围问题。

重新生成图表后，您从中调用隐藏/显示逻辑的点击功能无法访问图表变量。

通过

移动chart和legend变量的声明在所有职能之外
从函数中删除click事件处理程序
从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;
        }
    });

隐藏并显示高级图例

2 个答案: