dimple.js 中我的图表的响应大小不起作用

Question

我的页面上有一个 svg 组件，我在其中附加了酒窝图表。我希望图表能够响应地调整大小。

我在文档中提到了这个example。

但是当我在我的折线图中以类似的方式使用它时，它似乎不起作用。我的折线图代码如下：

                    var xpoints = chartData["xdata"];//Populated Dynamically
                    var ypoints = chartData["ydata"];//Populated Dynamically


                    var dataset = [];
                    var line1;

                    for (var i = 0; i < xpoints.length; i++) {

                            dataset.push({
                                x : xpoints[i],
                                y1 : parseFloat(ypoints[i])
                            });
                        }

                    var svg = dimple.newSvg("#" + mychart, "100%", "100%");

                    var x, y;

                    var myChart = new dimple.chart(svg, dataset);

                    myChart.setMargins("60px", "30px", "110px", "70px");

                    y = myChart.addMeasureAxis("y", "y1");
                    x = myChart.addCategoryAxis("x", "x");

                    line1 = myChart.addSeries("First", dimple.plot.line, [ x, y ]);

                    line1.lineMarkers = true;

                    var l = myChart.addLegend(65, 10, 510, 20, "right");

                    myChart.draw(1500);

                      window.onresize = function () {
                            myChart.draw(0, true);
                          };

是不是我不能在同一个 window 中执行此操作，我绝对有必要像示例中那样创建一个新的 window？

控制台没有显示任何错误，图表正确呈现。只是调整大小功能不起作用！

Answer 1

好的，我发现我的错误了！

Turns out there is no need to create a new window.

就是这样，我明确定义了我要附加 svg 的 div (#mychart) 的高度和宽度，这些尺寸以像素为单位。因此，即使 window 调整大小，svg 的大小也保持不变 - 因为它始终是恒定像素值 的 100%。所以该函数实际上也更早触发，但最终具有相同的维度。

我将 div 的尺寸更改为百分比值，一切正常 :D

dimple.js 中我的图表的响应大小不起作用

Responsive sizing of my chart in dimple.js is not working

javascript

charts

svg

d3.js

dimple.js