【问题标题】:Highchart with scaled images in column bars?柱状图中带有缩放图像的Highchart?
【发布时间】:2013-04-28 05:50:30
【问题描述】:
如何将图像添加到正确缩放到条形高度的条形列。
请参阅下面的 jsfiddle 示例,我正在尝试使用摩天大楼图像作为条形柱的背景来比较高度的图表,但是背景图像似乎有点随机地循环/平铺,我该如何解决这个问题。
谢谢
color: {
pattern: 'http://www.aperfectworld.org/clipart/buildings/buildings08g.gif',
width: '100%',
height: '100%'
}
http://jsfiddle.net/2BqSY/4/
【问题讨论】:
标签:
highcharts
highstock
gwt-highcharts
【解决方案1】:
我认为可能无法使用模式,但您可以使用渲染器添加一些图像:
http://jsfiddle.net/YZkPX/
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function () {
var chart = this,
d = chart.series[0].data;
for (var i = 0, len = d.length; i < len; i++) {
var p = d[i],
x = chart.plotLeft + p.plotX - p.pointWidth / 2,
y = chart.plotTop + p.plotY,
w = p.pointWidth,
h = p.graphic.height;
chart.renderer.image('http://www.aperfectworld.org/clipart/buildings/buildings08g.gif', x, y, w, h).add();
}
}
}
},
现在您需要在重绘系列时重新计算 x/y/w/h(缩放/显示/隐藏等)