javascript - Highcharts 背景图片大小选项

Question

我正在使用 Highcharts 在网页上呈现图表。现在，如果我在容器 div 上使用 min-width 和 max-width CSS 选项，我发现了一个问题:

<div id="container" style="min-width: 310px; max-width: 960px; height:400px;"></div>

我用这个方法添加了背景图片:

Highcharts.theme = {
    chart: {
        backgroundColor: '#FFFFFF',
        plotBackgroundImage: '/path/to/mybackgroundimage.png'
    }
};

这张图片的宽度为 960 像素，高度为 400 像素，在桌面设备上显示效果很好，但如果我在移动设备上查看它，图片的宽高比就会消失，并且图片会变形。

是否有 backgroundSize:'cover' 或类似的东西来固定不同屏幕宽度上的图像位置和大小？

Answer 1

您可以禁用 plotBackgroundImage 参数并将 backgroundColor 设置为透明。然后在 CSS 中应用背景 img(用于容器)。

CSS

#container {
   background:url(https://www.highcharts.com/samples/graphics/skies.jpg) 0% 0%;
   background-size:cover;
}

图表:

chart: {
   backgroundColor: 'rgba(0,0,0,0)',
   type: 'line'
}

例子 - http://jsfiddle.net/4q7atyt9/