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

Question

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

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

这是我设计的：

Answer 1

您可以使用此添加模式

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

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

演示- Fiddle Here

Answer 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/