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

Question

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

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

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

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  
        }
    },
    ...
});