Question

如何将图像添加到正确缩放到条形高度的条形列。

请参阅下面的jsfiddle示例，我试图做一个比较高度的图表，使用摩天大楼图像作为条形图的背景，但背景图像似乎有点随机循环/平铺，我该如何解决这个问题。

感谢

        color: {
           pattern: 'http://www.aperfectworld.org/clipart/buildings/buildings08g.gif',
           width: '100%',
           height: '100%'
        }

http://jsfiddle.net/2BqSY/4/

Answer 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（缩放/显示/隐藏等）。

列栏中带有缩放图像的Highchart？

1 个答案: