具有D3图的Bootstrap模态对话框

Question

首先：

我对带有图的动态模态对话框有疑问。 代码很简单：

https://jsfiddle.net/c2abnhja/1/

如您所见，在创建的div容器中没有图。 但是，如果您调整窗口的大小，则会使用模态对话框的正确大小正确绘制图表。 [此外，是否触发手册中的调整大小事件也没关系： https ： //jsfiddle.net/ywaoec3d/1/ ]

第二：

如果我在引导程序的模态对话框中设置大小，例如： https ://jsfiddle.net/aqs5fhha/1/，则该图永远不会获得模态内容的正确高度...但是c3.js的文档说：

size.height

The desired height of the chart element.

If this option is not specified, the height of the chart will be
calculated by the size of the parent element it's appended to.

知道为什么图表绘制不正确吗？

提前致谢

Answer 1

我可以使用以下方法解决您的问题：

$('#myModal').on('shown.bs.modal', function() {
    var chart = c3.generate({
        bindto: '#diagramAppend',
        data: {
            x: 'x',
            columns: [
                ['x', 30, 50, 100, 230, 300, 310],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 130, 300, 200, 300, 250, 450]
            ]
        }
    });
});

基本上发生的事情是您尝试在width为0的div上生成图形。 等待显示的事件shown.bs.modal使您此时具有width 。

更新了JSFiddle