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

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

How to style images in highcharts flags?

javascript

css

flags

image

highcharts