带有 D3 图的引导模态对话框

Bootstrap Modal-Dialog with D3 diagram

本文关键字：模态 对话框 D3 带有      更新时间：2023-09-26

First ：

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

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.

知道为什么图表画得不正确吗？

提前致谢

我能够使用这个来解决您的问题：

$('#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 width 的div上生成图形。此时，等待事件shown.bs.modal允许您进行width。

更新的 JSFiddle

相关文章：