Highcharts背景图像大小选项 [英] Highcharts background image size option

问题描述

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

I'm using Highcharts to render charts on webpage. Now I found an issue if I use min-width and max-width CSS option on container div:

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

我通过这种方法添加了背景图片:

I added a background image with this method:

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

此图片的宽度为960px，高度为400px，在台式机上也能很好地显示，但是如果在移动设备上进行查看，则图片的长宽比就消失了，并且图片变形了.

This image has 960px width and 400px height and it shows well on desktops, but if I check it on mobile devices the image's apect ratio has gone and the image become distorted.

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

Is there a backgroundSize:'cover' or something like this to fix the image position and size on different screen widths?

推荐答案

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

You can disable the plotBackgroundImage parameter and set the backgroundColor as transparent. Then apply the background img in CSS (for the container).

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/

这篇关于Highcharts背景图像大小选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！