Question

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

max-width

我用这种方法添加了背景图片：

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

此图片的宽度为960像素，高度为400像素，在桌面上显示效果很好，但如果我在移动设备上查看，图像的比例已经消失，图像也会失真。

是否有Highcharts.theme = { chart: { backgroundColor: '#FFFFFF', plotBackgroundImage: '/path/to/mybackgroundimage.png' } };或类似的东西来修复不同屏幕宽度的图像位置和大小？

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/

Answer 2

我认为您可以使用 rem 代替 px 。

rem被称为＆＃34; root em＆＃34;可以根据屏幕尺寸改变大小。

<div id="container" style="min-width: 20rem; max-width: 60rem; height:15rem;"></div>

注意：

10px = 0.625rem; 16px = 1rem;

Answer 3

在你的CSS中

@media screen and (min-width: 480px) and (max-width:980px) {
  #container { 
  min-width: 20rem; //change the size
  max-width: 60rem; 
  height: 15rem;
 }
}

Highcharts背景图像大小选项

3 个答案: