Question

我原本想在我的网站上以并排的配置显示很多高图。现在我已经尝试在网站上只包含一个高图，并让观众可以选择使用按钮在它们之间切换。我是一个全新的人，所以我在做这个问题时遇到了一些问题。我一直试图使用以下小提琴：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/

- ＆GT;但是这个例子和我的设置之间存在一些差异，我遇到了麻烦。

我使用我在网上找到的一些JSON模板从数据库填充我的高图（因为有很多图表，我将所有代码保存在一个单独的data.php文件中）。一切正常。

下面是我想要做的一个例子 - 我已经在下面的代码中插入了两个高图，但是会有更多。每个图表都有不同的工具提示和y轴选项等等。所以我认为它不会只是改变数据本身。

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
 $('chart1').ready(function() {
        var options = {
            chart: {
                renderTo: 'chart1',
                type: 'column',
                marginTop: 40,
                marginBottom: 75
            },
            legend: {
                enabled: false
            },
            title: {
                text: 'Revenues',
                x: 25 //center
            },

            xAxis: {
                title: {
                    text: ''
                },
                categories: []
            },
            yAxis: {
                showInLegend: false,
                tickAmount: 11,
                endOnTick: false,
                startOnTick: true,
                labels: {
                    formatter: function () {
                    return Highcharts.numberFormat(this.value, 0, '.', ',');
                                }
                },
                title: {
                    text: '<?php echo $unitCurr; ?>'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
                }
            },
            series: []
        }
        var tableName = '<?php echo $tableName; ?>'
        $.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            chart = new Highcharts.Chart(options);
        });
    });       


 $('chart2').ready(function() {
        var options = {
            chart: {
                renderTo: 'chart2',
                type: 'column',
                marginTop: 40,
                marginBottom: 75
            },
            legend: {
                enabled: false
            },
            title: {
                text: 'Net profit or loss',
                x: 25 //center
            },

            xAxis: {
                title: {
                    text: ''
                },
                categories: []
            },
            yAxis: {
                showInLegend: false,
                tickAmount: 11,
                endOnTick: false,
                startOnTick: true,
                labels: {
                    formatter: function () {
                    return Highcharts.numberFormat(this.value, 0, '.', ',');
                                }
                },
                title: {
                    text: '<?php echo $unitCurr; ?>'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ Highcharts.numberFormat(this.y, 1,'.',',');
                }
            },
            series: []
        }
        var tableName = '<?php echo $tableName; ?>'
        $.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[6];
            chart = new Highcharts.Chart(options);
        });
    });

    </script>

</head>

<body>
    <div id="chart1"></div>
    <button id="button" class="autocompare">Set new data</button>
</body>


</html>

到目前为止的进展：

我尝试使用下面的代码删除div并创建一个新div。这导致删除'chart1'但不创建'chart2'。此外 - 实际上有大约10个图表必须创建，所以我想知道是否有人能想到一种方式，其中10个按钮中的每一个将始终删除上面的当前图表，而是创建专用于该特定按钮的图表？

    <script>
    $('#button').on('click',function(){
        var elem = document.getElementById("chart1");
        elem.remove();
        var div = document.createElement('div');
        div.id = "chart2";
    });
    </script>

如果你能给我提供解释如何做到这一点或如何更好地理解整个事物的链接，我也很高兴。我非常肯定这必须使用javascript或ajax完成，但我使用这些的经验很少，所以我只需要一些灵感。

提前多多感谢！

Answer 1

我会这样做 - 点击按钮，销毁图表并在其位置构建一个新图标。

此示例适用于页面上定义的数据和图表对象，但您可以在此单击事件处理程序内部，根据从单击按钮获取的相同密钥获取外部数据和外部图表选项定义

  $(document).on('click', '.chart-update', function() {
    chart.destroy(); <-- destroys the current chart object
    $('#container').highcharts(chartOptions[$(this).data('chartName')]); <-- rebuilds a new chart
    chart = $('#container').highcharts(); <-- re-associates the 'chart' variable with the current chart object
  });

小提琴：

http://jsfiddle.net/jlbriggs/7ntyzo6u/

使用按钮或链接文本在许多Highcharts之间切换

1 个答案: