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

ki1q1bka 于 2022-11-19 发布在 Highcharts

关注(0)|答案(2)|浏览(158)

在我的图表中，我显示了用户评论日期的图片，所以用户可以使用这些图标在工具提示中阅读评论。看起来像是声音云图表。我使用标志类型，并将形状变量设置为每个数据项的用户图片URL。
但我也想为每个图标添加彩色边框。我知道，有lineWidth和lineColor配置标志类型，但它不工作的图像，它只与默认形状flag，circlepin或squarepin。
我尝试使用形状作为flag和添加用户图像作为背景图像，但它不工作。

css

来源：https://stackoverflow.com/questions/33217775/how-to-style-images-in-highcharts-flags

2条答案

按热度按时间

yduiuuwa1#

在SVG中，你不能为图像设置边框，你需要在图像周围创建矩形：http://jsfiddle.net/xuL76rkL/1/
例如，您可以使用load和redraw事件来管理这些rect，代码为：

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

赞(0）回复(0）举报 2022-11-19

cu6pst1q2#

可以使用形状选项设置图像：
示例：shape: "url(/assets/my_image.svg)"
文档可从以下网址获得：https://api.highcharts.com/highstock/series.flags.shape

赞(0）回复(0）举报 2022-11-19