javascript - 在面板中的图表和表格之间切换

Question

我有一个可以正确呈现到引导面板中的 Highchart。

Highchart 代码

$(function ()  {
var chart1;
$.get('graphdata/a000.txt?x='+microtime(), function(json){
obj = eval('({'+json+'})');
var $container = $('#container');
$(document).ready(function() {
chart = new  Highcharts.Chart(obj)
});
});
});

面板代码

<div id="container" class="panel-body">

我希望能够通过某些按钮或开关将图表和表格(在单独的面板中单独呈现)切换到相同面板

function myTable() {
    $('#table').bootstrapTable({
        data: mydata
    });
};

                          <table id="table" data-height="460"   class="panel-body">
                              <thead>
                                <tr>
                                    <th data-field="id">Item ID</th>
                                    <th data-field="name">Item Name</th>
                                    <th data-field="price">Item Price</th>
                                </tr>
                             </thead>
                         </table>

<小时/>

Answer 1

Highcharts.chart 方法从容器中删除所有元素。您应该为图表和表格创建单独的容器元素，并在函数中切换它们的可见性。示例:http://jsfiddle.net/BlackLabel/aj6ckzs2/

var chart = createChart(),
    table = $("#table"),
    chartContainer = $("#chartContainer");

table.bootstrapTable({
    data: myData
});

$("#toggle").on('click', function() {
    chartContainer.toggle();
    table.toggle();
});

如果您仍然需要将表格直接添加到与图表相同的容器中，则必须使用 Chart.destroy 方法并将表格添加到容器元素中，例如这样:

function createChart() {
    return Highcharts.chart('container', {
        series: [{
            data: [...]
        }]
    });
}

function createTable() {
    var newTable = $("#table").clone(),
        container = $("#container");

    container.append(newTable);
    newTable.show();
    newTable.bootstrapTable({
        data: myData
    });
}

var myData = [...];
var chart = createChart();

$("#toggle").on('click', function() {
    if (chart.series) {
        chart.destroy();
        createTable();
    } else {
        chart = createChart();
    }
});

现场演示:http://jsfiddle.net/BlackLabel/vqpdoynt/