我第一次使用 highcharts.js。看起来很棒而且很强大,到目前为止我很喜欢它。
但是,我正在尝试让我的柱形图看起来更性感,并且无法找到有关我如何做到这一点的信息,至少在使用列的重复背景图像方面。
这是我设计的:
我第一次使用 highcharts.js。看起来很棒而且很强大,到目前为止我很喜欢它。
但是,我正在尝试让我的柱形图看起来更性感,并且无法找到有关我如何做到这一点的信息,至少在使用列的重复背景图像方面。
这是我设计的:
您可以使用此添加模式
color: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern3.png',
width: 6,
height: 6
}
在 seriesData 中进行相应修改以满足您的需求
演示- Fiddle Here
仅供参考,我在 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/