Question

我的highstock图表中有一个legendItemClick事件。它打开一个jQuery对话框，当我点击一个图例并抓取当前系列ID，类型，yAxis等。这部分工作正常。如果我动态更改我的图表类型，我无法第二次调用我的图例项目。虽然如果我动态地改变图表轴，它可以正常工作。

图例项目点击代码：

plotOptions: {
line: {
events: { checkboxClick: function () {
alert("checkbox clicked");
},
legendItemClick: function () {
console.log("In legend item click");
console.log(this);
//event.preventDefault();
$("#dialog")
.dialog("open");
$("#legendTable")
.html("");
$('#legendTable')
.append("<tr>"
+"<td>Axis</td><td><select onchange=\"updateSeries("+this.index+")\" id=\"legendAxis\""
+" name=\"legendAxis\"><option value=\"0\">1</option><option"
+" value=\"1\">2</option><option value=\"2\">3</option></select></td>"
+"<td>Type</td><td><select onchange=\"updateSeries("+this.index+")\" id=\"legendType\""
+" name=\"legendType\"><option value=\"line\">Line</option><option"
+" value=\"column\">Column</option><option value=\"area\">Area</option>"
+"<option value=\"bar\">Bar</option>"
+"<option value=\"spline\">Spline</option>"
+"<option value=\"areaspline\">Area Spline</option>"
+"</select></td>"
+"</tr>");
$("#legendAxis").val(this.userOptions.yAxis);
$("#legendType").val(this.userOptions.type);
return false;
}
}
}
}

更新系列代码：

function updateSeries(id) {
console.log("in update");
console.log($("#legendAxis")
.val());
console.log($("#legendType")
.val());
var chart = $('#container')
.highcharts();
chart.series[id].update({
type: $("#legendType")
.val(),
yAxis: parseInt($("#legendAxis")
.val())
});
return;
};

对话框代码：

<div id="dialog" title="Update Series">
<table id="legendTable"></table>

Answer 1

我在下面的代码中使用了行而不是系列。以前：

plotOptions: {
line: {
events: { checkboxClick: function () {
alert("checkbox clicked");
},

代替：

plotOptions: {
series: {
events: { checkboxClick: function () {
alert("checkbox clicked");
},

legendItemClick在更改图表类型后未被触发

1 个答案: