隐藏并显示高图表图例
Hide and show highchart legend
我有一个高图，上面有很多图例。我写了一个函数来切换图例的可见性。以下是我的代码：
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>这是堆栈溢出的实时代码。请提供帮助，因为此功能对项目非常必要。
我不能确切地告诉你是什么阻止了变量的传递，但正如我所提到的，这似乎是一个范围问题。
重新生成图表后，您调用隐藏/显示逻辑的单击函数无法访问图表变量。
通过
- 移动
chart和legend变量的声明在所有功能之外 - 从函数中删除单击事件处理程序
- 从Highcharts回调中移除该函数的绑定
一切似乎都很好：
- http://jsfiddle.net/jlbriggs/9x4vmqyj/11/
我确信还有其他方法可以让它发挥作用，但你的设置相当复杂——它看起来过于复杂，但可能还有其他情况需要如此复杂。。。
$('#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;
}
});
相关文章：
- 在高图表中，每x步只显示标签
- 高图表不显示来自csv文件的数据
- 高图表在点单击时显示工具提示
- 同时在高图表中显示多个工具提示
- 日期不能显示在高图表上
- 当间隔之间的范围高时，在高图表中显示y轴上的整个值
- 使用节点下载高图表数据，但不在浏览器中显示
- 隐藏并显示高图表图例
- 为什么我的addSeries(在高图表中）只显示系列的名称，而不显示实际的饼图本身
- 在高图表中显示一个状态的总时间之和
- 高图表错误 #15，图形显示正确
- 如何在高图表的基本柱形图中隐藏/显示列
- 动态显示实时高图表数据，无需警报
- 高图表(高库存）:从外部 CSV 获取数据，无法正确显示日期
- 高图表在删除后不显示数据
- 高图表没有点标记，但显示单点或不连续点
- 由于未定义的序列，不显示高图表最近点工具提示
- 高图表:显示错误值的堆积区域工具提示
- 高图表 - 显示心率
- 高图表:显示两条线而不是一条线
