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

【问题标题】：How to add a background image (pattern) to highchart column graph?如何将背景图像（图案）添加到 highchart 柱形图中？
【发布时间】：2018-09-18 21:15:07
【问题描述】：

我是第一次使用 highcharts.js。看起来很棒而且很强大，到目前为止我很喜欢它。

但是，我正在尝试让我的柱形图看起来更性感，但我无法找到有关如何做到这一点的信息，至少在为柱使用重复背景图像方面。

这是我设计的：

【问题讨论】：

我不认为这是一个选项 - 请参阅 api.highcharts.com/highcharts#plotOptions.bar
你，一整天都在浏览他们的东西，没有运气。希望有人知道我不知道的事情：\谢谢-
尝试使用 raw svg 手动设置背景。这是最方便的选择。
例如 $('some_selector').after(chart.renderer.image(imageToAdd, 0, 0, 50, 30).element) 会为你渲染图片。
@JohnBlythe 你看到这个问题的答案了吗，它可能对你有帮助stackoverflow.com/questions/11841120/…。另请查看 api 的图像示例，它向您展示了如何将图像添加到图表，jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/…

标签： highcharts background-image

【解决方案1】：

你可以使用这个来添加模式

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

根据您对 seriesData 的需要进行相应修改

演示 - Fiddle Here

【讨论】：

【解决方案2】：

仅供参考，我在Highcharts论坛（http://highslide.com/forum/viewtopic.php?f=9&t=25673）上回复了相同的问题

首先，有一个使用模式填充列的想法。基本演示已发布在 Highcharts Uservoice 网站 (http://highcharts.uservoice.com/forums/55896-general/suggestions/2378007-allow-fill-patterns-for-areas-columns-plot-bands)。

您可以改进该代码以创建带有渐变填充的 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);
    }
};

此处提供现场演示：http://jsfiddle.net/Kr82z/

【讨论】：

感谢您的帮助。我在论坛上看到了帖子并去回复，但那是他们禁用论坛的时候：\我已经把图案部分放下了，这是我当前的问题是渐变和图案。除非我误解了你的帖子，否则这似乎不是一个好的、可行的选择，是吗？
不幸的是，这是我想出的最简单的解决方案。另外两个是：1）创建带有渐变、图案和发光的图像，并将其放置在每列的顶部。图像应该和图表一样高，所以它可以被剪裁。 2) 了解 SVG“使用”元素 (w3.org/TR/SVG/struct.html#UseElement) 并为渐变或图案渲染单独的元素。