我有一个可以正确呈现到引导面板中的 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>
<小时/>
最佳答案
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();
}
});
关于javascript - 在面板中的图表和表格之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51698099/