在 highcharts 的甘特图的每个点上渲染 SVG 图像

Question

我想在甘特图中的每个点上放置一些 SVG 图像，我试过如下所示：

function (chartt) { // on complete
            chartt.renderer.image('imageURL.png',100,100,30,30)
                .add();
}

但是在运行这段代码之后，图片会显示在页面的一角。我想在图表中的每个点上绘制图像并设置它们与该点相关的位置。

现场演示：https://jsfiddle.net/meysamm22/x41wdu5z/

Answer 1

您需要使用正确的 x 和 y 属性，根据 plotX 和 plotY 点的属性计算它们：

    function(chartt) { // on complete
        var points = chartt.series[0].points,
            width = 30,
            height = 30;

        points.forEach(function(point) {
            chartt.renderer.image(
                    'https://www.highcharts.com/images/employees2014/Torstein.jpg',
                    point.plotX + chartt.plotLeft + point.shapeArgs.width / 2 - width / 2,
                    point.plotY + chartt.plotTop - height / 2,
                    width,
                    height
                )
                .attr({
                    zIndex: 5
                })
                .add();
        });
    });

现场演示： https://jsfiddle.net/BlackLabel/r4ph3ykz/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

在 highcharts 的甘特图的每个点上渲染 SVG 图像

Render SVG images on each point of gantt chart in highcharts

highcharts

highcharts-gantt