我正在尝试使用单选按钮使用div在两个Highchart图表（不同数据系列）之间切换显示。我基本上需要在这里接受的解决方案：Mootools Highcharts radio button toggle between charts, working jQuery version
...但是我不知道如何从现有代码中为每个图表指定变量。上面的解决方案使用以下格式：
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'divID-1',
height: 400,
...
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'divID-2',
height: 400,
...
而我的每个图表均以以下格式指定，例如图表1：
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$.get('data_stackedarea_value.csv', function(csv) {
$('#divID-1').highcharts({
chart: {type: 'area'},
data: {csv: csv},
...
如何将它们转换为可由初始切换功能调用的变量？
window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
$$('.toHide').setStyle('top', '-9999em');
$$('.toHide').setStyle('opacity', '0');
$("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});
非常感谢
最佳答案
这是一个示例，其中我采用了23817700中的解决方案，以使用将变量传递到图表的方式。
我已经忍不住也需要修改切换代码以使用jQuery，因为它已经是必需的。您可以尝试在@RachelGallen提供的这个小提琴中执行此操作：https://jsfiddle.net/ezc7oghm/1/
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div id="graphwrap" style="height: 410px;">
<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
</div>
<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="divID-1" style="cursor:pointer;" checked/>1</label>
<label><input id="rdb2" type="radio" name="toggler" value="divID-2" style="cursor:pointer;" />2</label>
</div>
<script>
$(function() {
$('[name=toggler]').click(function () {
$('.toHide').css({
top: '-9999em',
opacity: 0
});
var chartToShow = $(this).val();
$('#' + chartToShow).css({
top: 0,
opacity: 1
});
});
$('#divID-1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
$('#divID-2').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Time spent on hobbies'
},
xAxis: {
categories: ['Skiing', 'Bicycling', 'Swimming']
},
yAxis: {
title: {
text: 'Time spent on hobbies'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
关于javascript - Highcharts 单选按钮在图表之间切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42661010/