Highcharts 如何将背景图像（图案）添加到highchart柱形图？

我第一次使用highcharts.js。看起来很棒，很有力量，到目前为止我很喜欢

然而，我正试图让我的柱状图看起来更性感一点，并且我很难找到关于如何做到这一点的信息，至少是关于使用重复的背景图像作为专栏

---

以下是我的设计：

仅供参考，我在海图论坛上回答了同样的问题（）

首先，有一个想法是对列使用模式填充。基本演示发布在Highcharts Uservoice网站（）

您可以改进代码，创建带有渐变填充的SVG模式。主要的困难是支持数据更新（和动画）。因此，我们不能为渐变元素定义固定宽度。请参见下面的示例代码：

Highcharts.Renderer.prototype.color = function (color, elem, prop) {

    if (color && color.pattern && prop === 'fill') {
        // SVG renderer
        if (this.box.tagName == 'svg') {
            var patternA,
                patternB,
                bgColor,
                bgPattern,
                image,
                id;

            id = 'highcharts-pattern-' + idCounter++;

            patternA = this.createElement('pattern')
            .attr({
                id: id,
                patternUnits: 'userSpaceOnUse',
                width: '100%',
                height: '100%'
            })
            .add(this.defs);

            patternB = this.createElement('pattern')
            .attr({
                id: id + '-image',
                patternUnits: 'userSpaceOnUse',
                width: color.width,
                height: color.width
            })
            .add(this.defs);

            image = this.image(color.pattern, 0, 0, 6, 6)
            .add(patternB);


            bgColor = this.rect(0, 0, 0, 0, 0, 0)
            .attr({
                fill: color.fill,
                width: '100%',
                height: '100%'
            })
            .add(patternA);


            bgPattern = this.rect(0, 0, 0, 0, 0, 0)
            .attr({
                fill: 'url(' + this.url + '#' + id + '-image)',
                width: '100%',
                height: '100%'
            })
            .add(patternA);

            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);
    }
};

Highcharts.Renderer.prototype.color=函数（颜色、元素、属性）{
如果（颜色&&color.pattern&&prop==='fill'）{
//SVG渲染器
if（this.box.tagName==“svg”）{
var patternA，
模式B，
bgColor，
BG模式，
形象,，
身份证件
id='高位图表模式-'+idCounter++；
patternA=this.createElement（'pattern'）
艾特先生({
id:id，
patternUnits:'userSpaceOnUse'，
宽度：“100%”，
身高：“100%”
})
.add（this.defs）；
patternB=this.createElement（'pattern'）
艾特先生({
id:id+'-image',，
patternUnits:'userSpaceOnUse'，
宽度：color.width，
高度：颜色。宽度
})
.add（this.defs）；
image=this.image（color.pattern，0,0,6,6）
.加入（b）；
bgColor=this.rect（0,0,0,0,0,0）
艾特先生({
填充：color.fill，
宽度：“100%”，
身高：“100%”
})
.加入（a）；
bgPattern=this.rect（0,0,0,0,0）
艾特先生({
填充：'url（'+this.url+'#'+id+'-image）'，
宽度：“100%”，
身高：“100%”
})
.加入（a）；
返回'url（'+this.url+'#'+id+'）；
//VML渲染器
}否则{
var标记=['']；
埃勒姆·帕迪奇(
document.createElement（this.prepVML（markup））；
}
}否则{
返回base.apply（这个，参数）；
}
};

---

此处提供的实时演示：

您可以使用此

      color: {
                pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern3.png',
                width: 6,
                height: 6
            }

在seriesData中进行相应修改以满足您的需要

演示-

---

我认为这目前不是一个选项-请参阅api.highcharts.com/highcharts#plotOptions.barya，他整天都在浏览他们的资料，运气不好。希望有人知道一些我不知道的事情：\Thank尝试使用原始svg手动设置您的背景。这是最方便的选项。例如，$（'some_selector'）。after（chart.renderer.image（imageToAdd，0，0，50，30）.element）将为您渲染图像。@johnbly如果您看到这个问题的答案，它可能会对您有所帮助。还可以查看api的图像示例，它向您展示了如何将图像添加到图表中，非常感谢您的帮助。我在论坛上看到了这篇文章，然后去回复，但那是他们禁用论坛的时候：\n我已经把模式部分记下来了，我现在的问题是梯度和模式。除非我误解了你的帖子，否则这似乎不是一个好的、可行的选择，是吗？不幸的是，这是我想出的最简单的解决方案。另外两个是：1）创建具有渐变、图案和光晕的图像，并将其放置在每列的顶部。图像应该和图表一样高，所以可以剪裁。2） 了解SVG的“use”元素（）并为渐变或模式渲染单独的元素。