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/

select t.*
from table as t
where t.name is not null and
      t.date = (select max(t1.date)
                from table as t1
                where t1.account_nbr = t.account_nbr
               );

如果仍然需要将表直接添加到与图表相同的容器中，则必须使用chart.destroy方法并将表添加到容器元素中，例如，通过这种方式：

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

table.bootstrapTable({
    data: myData
});

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

实时演示：http://jsfiddle.net/BlackLabel/vqpdoynt/

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

1 个答案: