Highcharts Backgroundimage为条形图 [英] Highcharts Backgroundimage for bar graph

问题描述

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

到目前为止，我一直在使用这个小插件，它在最新的Chrome中运行良好。
然而，只要我加载到我的UIWebView，图像不会显示。
我认为这与iOS可能无法解析图像文件的正确路径有关吗？

是否有另一种（更简单的）方法添加一个背景图像到条形图？

在我的Highcharts数据系列中

  color：{
 pattern：'static / img / theimage.png'，
 width：160，
 height：500 
} 
  

插件

  / ** 
 * Highcharts pattern fill plugin 
 * / 
（function（）{
 var idCounter = 0， 
基= Highcharts.Renderer.prototype.color; 
 
 Highcharts.Renderer.prototype.color =函数（颜色，ELEM，丙）{
如果（彩色&安培;&安培; color.pattern&&& prop ==='fill'）{
 // SVG渲染器
 if（this.box.tagName =='svg'）{
 var id =' highcharts-pattern  - '+ idCounter ++; 
 var pat燕鸥= this.createElement（ '模式'）
 .attr（{
 ID：ID，
 patternUnits： 'userSpaceOnUse'，
宽度：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渲染器
} else {
 var markup = ['<'，prop，'type =tilesrc =''，color.pattern，' />']; 
 elem.appendChild（
 document.createElement（this.prepVML（markup））
）; 
} 
 
} else {
 return base.apply（this，arguments）; 
} 
}; 
}）（）; 
  

解决方案

我有类似的问题，显示我的渐变背景。

我最后解决了这个问题，把backgroundColor：null放在我的JS中，并在ID上使用CSS3渐变并声明高度DIV。这很可能也适用于背景图片。

I want to add a background image to a bar chart using Highcharts and display it in a UIWebView.

So far I've been using this little plugin, which is working fine in latest Chrome. However, as soon as I load this into my UIWebView, the image is not displayed. I think this is related to the fact that iOS might not be able to parse the correct path for the image file?

Is there another (simpler) way to just add a background-image to a bar chart?

In my Highcharts data series

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

The plugin

/**
 * 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);
        }
    };    
})();

解决方案

I had a similar problem in that my iPad wasn't showing up my gradient background.

I solved this in the end by putting backgroundColor: null, in my JS and using a CSS3 gradient on the ID and declaring the height of the DIV. This would most probably work with a background image as well.

这篇关于Highcharts Backgroundimage为条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！