javascript - 带 D3 图的 Bootstrap Modal-Dialog

Question

第一:

我对带有图表的动态模态对话框有疑问。 代码非常简单:

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

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

第二个:

如果我为 Bootstrap 的模式对话框设置一个大小，如下所示: 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]
            ]
        }
    });
});

基本上，发生的情况是您尝试在宽度为 0 的 div 上生成图表。等待事件 shown.bs.modal 可以让您在此时获得一个宽度。

已更新JSFiddle