Question

我创建了一个折线图，我在其中根据容器的大小设置折线图的宽度和高度

"style": {
                "width": Math.round($('#' + container).width()) + "px",
                "height": Math.round($('#' + container).height()) + "px",
                "border": "1px solid silver",
                "position": "relative",
                "top": "0px"
            },

最初容器的高度和宽度为0，因此svg的高度设置为一些默认的高度和宽度

        defaultHeigth = 500;
        defaultWidth = 1163;
        chartConfiguration.chart.style.height = defaultHeigth;
        chartConfiguration.chart.style.width = defaultWidth;

然后在创建svg时，我将视图框设置为

svgEle.setAttribute("viewBox", "0 0 " + chartConfigOptions.chart.style.width + " " + chartConfigOptions.chart.style.height);

svgEle.setAttribute("width", "100%");
svgEle.setAttribute("height", "100%");
svgEle.setAttribute("preserveAspectRatio", "none");

我尝试过像xMidYMid见面的各种preserveAspectRatio

但是在firefox上默认加载它会抛出NS_ERROR_FAILURE：当重新调整窗口大小时，图表会在容器内完美呈现在其他浏览器中，图表是渲染的，但它有点失真（如轴点和值重叠），并且在调整窗口大小时渲染得很好。

如何使用svg开发折线图，具有响应性

0 个答案: