javascript - Chartist.js 在模式中添加图表

Question

我在使用 Chartist.js ( Link ) 库时遇到了一个小问题。我能够在 html 页面上重现图表，但是，当我尝试放入引导模式时，图表只会压缩到 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();
});
});

我试图对模态做同样的事情，但没有成功。你能告诉我hot wo解决这个问题吗？

谢谢大家！

Answer 1

好的，我找到了解决方案。您可以在模态开始显示后更新图表；通过使用这段 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();
});