我想使用Highcharts将背景图像添加到条形图中,并将其显示在UIWebView中。

到目前为止,我一直在使用这个小插件,在最新的Chrome浏览器中工作正常。
但是,一旦将其加载到我的UIWebView中,就不会显示该图像。
我认为这与以下事实有关:iOS可能无法解析图像文件的正确路径?

是否有另一种(简单的)方法仅将背景图像添加到条形图中?

在我的Highcharts数据系列中

color: {
   pattern: 'static/img/theimage.png',
   width: 160,
   height: 500
}


插件

/**
 * Highcharts pattern fill plugin
 */
(function() {
    var idCounter = 0,
        base = Highcharts.Renderer.prototype.color;

    Highcharts.Renderer.prototype.color = function(color, elem, prop) {
        if (color && color.pattern && prop === 'fill') {
            // SVG renderer
            if (this.box.tagName == 'svg') {
                var id = 'highcharts-pattern-'+ idCounter++;
                var pattern = this.createElement('pattern')
                        .attr({
                            id: id,
                            patternUnits: 'userSpaceOnUse',
                            width: color.width,
                            height: color.height
                        })
                        .add(this.defs),
                    image = this.image(
                        color.pattern, 0, 0, color.width, color.height
                    )
                    .add(pattern);
                return 'url(' + this.url + '#' + id + ')';

            // VML renderer
            } else {
                var markup = ['<', prop, ' type="tile" src="', color.pattern, '" />'];
                elem.appendChild(
                    document.createElement(this.prepVML(markup))
                );
            }

        } else {
            return base.apply(this, arguments);
        }
    };
})();

最佳答案

我有一个类似的问题,因为我的iPad没有显示渐变背景。

最后,我通过在我的JS中放置backgroundColor:null并在ID上使用CSS3渐变并声明DIV的高度来解决此问题。这也很可能与背景图像一起使用。

关于css - 条形图的Highcharts背景图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10982137/

10-12 12:30
查看更多