Question

我尝试使用单选按钮在两个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);
    });

非常感谢

Answer 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>

Highcharts单选按钮在图表之间切换

1 个答案: