Highcharts 下载Highchart时,我需要Highchart水印图像

Highcharts 下载Highchart时,我需要Highchart水印图像,highcharts,Highcharts,我正在使用HighCharts Javascript库作为web应用程序。下载Highchart时,我需要Highchart水印图像。 我使用的是正常的Higchart代码。 Highcharts.chart('container'{ 图表:{ 类型:'bar' }, 标题:{ 文本:“堆叠条形图” }, xAxis:{ 类别:[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’] }, 亚克斯:{ 分:0,, 标题:{ 正文:“水果总消费量” } }, 图例:{ 对 }, 打印选项:{ 系列:

我正在使用HighCharts Javascript库作为web应用程序。下载Highchart时,我需要Highchart水印图像。 我使用的是正常的Higchart代码。

Highcharts.chart('container'{
图表:{
类型:'bar'
},
标题:{
文本:“堆叠条形图”
},
xAxis:{
类别:[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯:{
分:0,,
标题:{
正文:“水果总消费量”
}
},
图例:{
对
},
打印选项:{
系列:{
堆叠:“正常”
}
},
系列:[{
姓名:'约翰',
数据:[5,3,4,7,2]
}, {
姓名:'简',
数据:[2,2,3,2,1]
}, {
名字:'乔',
数据:[3,4,4,2,5]
}]
});

只有在下载图片时,您才可以将图片包含在中,如下所示:

exporting: {
  chartOptions: {
    chart: {
      plotBackgroundImage: 'https://i.stack.imgur.com/E1r9X.png'
    }
  }
}
Highcharts.chart('container'{
图表:{
类型:'bar'
},
标题:{
文本:“堆叠条形图”
},
xAxis:{
类别:[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯:{
分:0,,
标题:{
正文:“水果总消费量”
}
},
图例:{
对
},
打印选项:{
系列:{
堆叠:“正常”
}
},
系列:[{
姓名:'约翰',
数据:[5,3,4,7,2]
}, {
姓名:'简',
数据:[2,2,3,2,1]
}, {
名字:'乔',
数据:[3,4,4,2,5]
}],
出口:{
图表选项:{
图表:{
plotBackgroundImage:'https://i.stack.imgur.com/E1r9X.png'
}
}
}
});

请使用此代码

var图表=新的Highcharts.图表({
图表:{
renderTo:'容器',
活动:{
加载:函数(){
此.renderer.image('https://i.stack.imgur.com/E1r9X.png', 200, 20, 163, 187)
艾特先生({
zIndex:1000})
.add();
}
}
},
xAxis:{
类别:[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列:[{
数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}],
出口:{
启用图像:true
}
});
图像{显示:无;}

屏幕上可以与图表交互的水印(基于先前的答案)可以来自:

//
//  add a watermark (where template is the highchart object I'm building)
//
template.chart.events = {
    load: function() {
        this.renderer.image('https://i.stack.imgur.com/E1r9X.png')
        .attr({
    zIndex:1000, x:'10%', y:'10%', width:'80%',height:'80%', style:'pointer-events:none' })
          .add();
    }
};

下载是什么意思?图片下载。与png一样,JPEG感谢您的重播,但水印并没有完全显示在您的输出中。如果生成堆叠面积图表,图表柱将隐藏水印。背景图像未完全显示