如何将背景图像（模式）添加到高亮度列图？

Question

我第一次使用highcharts.js。看起来很强大，到目前为止我很享受。

然而，我正在尝试让我的柱形图看起来更加性感，并且无法找到关于我如何做到这一点的信息，至少在使用重复的背景图像作为列时。 / p>

这就是我设计的内容：

Answer 1

您可以使用此

添加模式

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

相应地修改以满足您在seriData中的需求

演示 - 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/