我的页面上有一个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);
};
是不是我不能在同一个窗口中执行此操作,并且我必须创建一个新窗口,如示例所示?
控制台未显示任何错误,图表正确呈现。只是调整大小功能不起作用!
答案 0 :(得分:0)
好的,我发现了我的错误!
原来不需要创建新窗口。
就是这样,我明确定义了我附加svg的div(#mychart)的高度和宽度,这些尺寸以像素为单位。因此,即使在窗口调整大小时,svg的大小也保持不变 - 因为它始终是恒定像素值的100%。所以这个功能实际上也是先发射,但结果却是相同的尺寸。
我将div的尺寸更改为百分比值,一切正常:D