无法在不同的选项卡中呈现多个响应式画布图
Can't render multiple responsive canvas graphs in different tabs
我在页面的不同选项卡(引导导航药丸选项卡)中有不同的图表。当我将图形设置为响应式时,非活动选项卡的宽度和高度属性计算为零,因此不会呈现非活动图形。我尝试在单击事件上定义和呈现图形,但这不起作用。
jsFiddle: http://jsfiddle.net/n2fole00/17nhjjp9/
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#one" class="blue-tabs">One</a></li>
<li><a data-toggle="tab" href="#two" class="blue-tabs">Two</a></li>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">
<canvas id="myChart" width="200" height="100"></canvas>
</div>
<div id="two" class="tab-pane fade">
<canvas id="myChart2" width="200" height="100"></canvas>
</div>
</div>
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "My First dataset",
fillColor: "red",
strokeColor: "red",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "red",
data: [40, 35, 38, 40, 35, 40,]
}
]
};
var data2 = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "My First dataset",
fillColor: "red",
strokeColor: "red",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "red",
data: [25, 25, 25, 25, 35, 25,]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var ctx2 = document.getElementById("myChart2").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, { responsive: true });
var myLineChart2 = new Chart(ctx2).Line(data2, { responsive: true });
可以做些什么来解决这个问题?
谢谢。
似乎每次在选项卡之间切换时都需要重新绘制图表。如果您只是调整窗口大小,您将看到正在渲染的图表...
调用一些触发器来破坏myLineChart2,然后再次初始化它。
相关文章:
- 如何在Google柱状图中动态添加行/列
- 更改高贴图的缩放级别
- 如何将getJson的响应保存在全局变量中
- 用与线条相同的颜色填充多折线图上的点
- 将高图饼图中的文本居中显示为响应
- D3.js:将一个有响应的饼图放在其父分区的中心
- 如何在 D3 中使力布局图.js响应屏幕/浏览器大小
- Angular 2 的响应式图库插件
- 使用 NVD3 的响应式饼图
- 无法在不同的选项卡中呈现多个响应式画布图
- 响应式气象图(图标)高图
- JQuery Mobile+ChartJS:只在调整大小后显示响应条形图
- 在Charts.Js条形图中加载800+个数据集时,Firefox没有响应
- 如何使D3折线图具有响应性
- D3js响应堆叠条形图-其他主题解决方案不起作用
- 回流后的高图没有响应
- 响应SVG线形图与Raphaë 1
- 动态JS拖动一个图层会导致另一个图层上的形状对拖动停止响应
- 使用响应设计时,一个视图上的多个D3js图会导致性能问题
- 响应式联合 js 图