在高图中的甘特图的每个点上渲染SVG图像 [英] Render SVG images on each point of gantt chart in highcharts

问题描述

我想在Gantt图表的每个点上放置一些图像作为SVG，我尝试了如下操作:

I want to put some images as SVG on each point in Gantt chart, I've tried something like below:

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

但是运行此代码后，图像将显示在页面的一角.我想在图表的每个点上绘制图像，并设置它们与该点相关的位置.

But after running this code, the image will be shown on the corner of the page. I want to draw images on each point in the chart and set their position related to its point.

实时演示: https://jsfiddle.net/meysamm22/x41wdu5z/

推荐答案

您需要使用正确的x和y属性，并根据plotX和plotY点的属性进行计算:

You need to use the right x and y attributes, calculate them based on plotX and plotY point's properties:

    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

这篇关于在高图中的甘特图的每个点上渲染SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！