How can I render a watermark image in my highchart from local directory?

Question

I have an image that I would like to render as a watermark on my chart. I saw the documentation of the official highcharts website regarding the Renderer.image method but that only concerns an external resource. Is there anyway I can get an image from my app/assets/images directory?

Answer 1

您可以使用Renderer.image将图像作为水印添加到图表中，如下所示：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function() {
                this.renderer.image('../img/logo.png', 6, 6, 45, 32)
                    .add();
            }
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    exporting: {
        enableImages: true
    }
});

此处的工作示例： http://jsfiddle.net/tLpL98L2/1/

请注意，水印图像是JSFiddle徽标，它是相对URL，而不是绝对URL。使用http://功能时，您不需要指定renderer.image，因此这可以让您在自己的服务器上使用图像。