如何在highcharts标志中设置图像样式？

Question

在我的图表中，我会显示用户图片的评论日期，因此用户可以使用这些图标在工具提示中阅读评论。它似乎是soundcloud图表。我使用标志类型做了它，并将形状变量设置为每个数据项的用户图片网址。

但我想为每个图标添加彩色边框。我知道，旗帜类型中有lineWidth和lineColor配置，但它不适用于图片，它仅适用于默认形状flag，circlepin或{ {1}}。

我尝试将形状用作squarepin并将用户图片添加为背景图片，但它不起作用。

Answer 1

在SVG中，您无法为图像设置边框，您需要在图像周围创建矩形：http://jsfiddle.net/xuL76rkL/1/

例如，您可以使用load和redraw个事件来管理这些代码，代码：

var H = Highcharts;
function drawBorder() {
    var chart = this;

    H.each(chart.series[1].points, function(p) {
        var bbox,
            rect,
            fontSize = 13, // it's used as default font size offet, even for the images
            dim = 32; //width and height for the image
        if(p.graphic) {
            if(p.rectangle) {
                p.rectangle.destroy();   
            }
            bbox = p.graphic.getBBox();
            rect = chart.renderer.rect(p.plotX - dim/2, p.plotY - dim/2 - fontSize, dim, dim).attr({
                "stroke": "black",
                "stroke-width": 2,
                "fill": "transparent"
            }).add(chart.series[1].markerGroup);
            p.rectangle = rect;
        }
    });
}


$('#container').highcharts('StockChart', {

    chart: {
        events: {
            load: drawBorder,
            redraw: drawBorder  
        }
    },
    ...
});