我有一个DataTable，它有一列复选框。以及HighStock图表。我正在尝试这样做，当选中数据表中的相应复选框时，它会在图表上显示/隐藏相应的系列行以及该行正在使用的轴。
表：
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>List</th>
<th class="all">Foods</th>
<th class="all"><input name="select_all" value="1" type="checkbox"></th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>1</td>
<td>Apples</td>
<td><input type="checkbox" id="name1" /></td>
</tr>
<tr class="odd gradeX">
<td>2</td>
<td>Oranges</td>
<td><input type="checkbox" id="name2" /></td>
</tr>
<tr class="odd gradeX">
<td>3</td>
<td>Pears</td>
<td><input type="checkbox" id="name3" /></td>
</tr>
</tbody>
</table>
</div>
HighStock：
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
offset: 26,
labels: {
format: '{value}Apples',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Apples',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
min: 0,
max: 100,
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 1,
title: {
text: 'Pears',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} pears',
style: {
color: Highcharts.getOptions().colors[0]
}
},
id: 'pears-axis',
opposite: true,
min: 0,
max: 25,
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true,
id: 'orange-axis',
min: 0,
max: 100,
}],
plotOptions: {
series: {
compare: '',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Pears',
type: 'spline',
yAxis: 1,
data: [
[Date.parse('05/30/2017 13:30:00'), 24],
[Date.parse('05/30/2017 13:45:00'), 24],
[Date.parse('05/30/2017 14:00:00'), 24],
[Date.parse('05/30/2017 14:15:00'), 24],
[Date.parse('05/30/2017 14:30:00'), 24],
[Date.parse('05/30/2017 14:45:00'), 24],
[Date.parse('05/30/2017 15:00:00'), 24],
[Date.parse('05/30/2017 15:15:00'), 24],
[Date.parse('05/30/2017 15:30:00'), 24],
[Date.parse('05/30/2017 15:45:00'), 24],
[Date.parse('05/30/2017 16:00:00'), 24],
[Date.parse('05/30/2017 16:15:00'), 24]
],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Oranges',
type: 'spline',
yAxis: 2,
data: [
[Date.parse('05/30/2017 13:30:00'), 20],
[Date.parse('05/30/2017 13:45:00'), 30],
[Date.parse('05/30/2017 14:00:00'), 40],
[Date.parse('05/30/2017 14:15:00'), 50],
[Date.parse('05/30/2017 14:30:00'), 60],
[Date.parse('05/30/2017 14:45:00'), 60],
[Date.parse('05/30/2017 15:00:00'), 60],
[Date.parse('05/30/2017 15:15:00'), 60],
[Date.parse('05/30/2017 15:30:00'), 70],
[Date.parse('05/30/2017 15:45:00'), 76],
[Date.parse('05/30/2017 16:00:00'), 78],
[Date.parse('05/30/2017 16:15:00'), 80]
],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Apples',
type: 'spline',
yAxis: 0,
data: [
[Date.parse('05/30/2017 13:30:00'), 70],
[Date.parse('05/30/2017 13:45:00'), 70],
[Date.parse('05/30/2017 14:00:00'), 76],
[Date.parse('05/30/2017 14:15:00'), 75],
[Date.parse('05/30/2017 14:30:00'), 78],
[Date.parse('05/30/2017 14:45:00'), 72],
[Date.parse('05/30/2017 15:00:00'), 80],
[Date.parse('05/30/2017 15:15:00'), 73],
[Date.parse('05/30/2017 15:30:00'), 75],
[Date.parse('05/30/2017 15:45:00'), 78],
[Date.parse('05/30/2017 16:00:00'), 72],
[Date.parse('05/30/2017 16:15:00'), 73]
],
tooltip: {
valueSuffix: ' °F'
}
}]
});
}
$.each(names, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
我尝试使用此代码来实现这一点，当选中橙子复选框时，它会隐藏橙色的线/系列以及橙色轴，然后在取消选中该框时，两者都重新出现。但相反，无论是检查框还是取消选中框，它都会一遍又一遍地添加橙色轴。我该如何解决这个问题？
$('#name2').click(function() {
var chart = $('#container').highcharts();
var series = chart.series;
var seriesIndex = 0
if (this.selected) {
series[seriesIndex].hide();
chart.get('oranges-axis').remove();
} else {
series[seriesIndex].show();
chart.addAxis({ // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true,
id: 'orange-axis',
min: 0,
max: 100,
});
}
});
答案 0 :(得分：1)
每次单击复选框时，都不必删除特定的yAxis。如果系列链接到特定系列，隐藏系列将在未应用最小值或最大值时自动隐藏yAxis。如果要设置min和max属性，可以更新yAxis.visible参数以切换轴可见性。看一下下面的例子。
API参考：
http://api.highcharts.com/highcharts/yAxis.visible
http://api.highcharts.com/highcharts/Axis.update