我正在将HighCharts Javascript库用于Web应用程序。下载Highchart时需要Highchart水印图像。 我正在使用普通的hicgchart代码。 Code here
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
有什么建议吗?
答案 0 :(得分:4)
请使用此代码
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function() {
this.renderer.image('https://i.stack.imgur.com/E1r9X.png', 200, 20, 163, 187)
.attr({
zIndex:1000 })
.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
}
});
image{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script><div id="container" style="height: 300px"></div>
答案 1 :(得分:1)
只有在下载图片后,才可以在图片中添加水印,例如将其添加到exporting options中:
exporting: {
chartOptions: {
chart: {
plotBackgroundImage: 'https://i.stack.imgur.com/E1r9X.png'
}
}
}
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}],
exporting: {
chartOptions: {
chart: {
plotBackgroundImage: 'https://i.stack.imgur.com/E1r9X.png'
}
}
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
工作中的JSFiddle示例: https://jsfiddle.net/ewolden/acL4z2su/2/
答案 2 :(得分:0)
您可以在屏幕上与图表进行交互的水印(基于先前的答案)可能来自:
//
// 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();
}
};