我在使用库 Chartist.js ( Link ) 时遇到了一个小问题。我能够在 html 页面上重现图表,但是,当我尝试放入 Bootstrap 模式时,图表只压缩到 1 个像素。这方面的例子可以在这里找到:http://jsfiddle.net/qw2Lnqng/4/ .我 udnerstood 问题是由于图形不知道可用空间。选项卡 ( Link ) 也会发生同样的情况。选项卡的解决方案在这里:http://jsbin.com/bawofakogu/1/edit?html,js,output .解决方案是添加这段代码:
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
我尝试对模式做同样的事情但没有成功。你能告诉我如何解决这个问题吗?
谢谢大家!
最佳答案
好的,我找到了解决方案。您可以在模态开始显示后更新图表;通过使用这段 jQuery 代码:
首先,将图表存储在变量中:
var yourchart = new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
然后使用此代码,您将能够将图表更新为其容器的新大小:
$('#popOverlay').on('shown.bs.modal', function (e) {
yourchart.update();
});
关于javascript - Chartist.js 在模态中添加图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33341551/