gpt4 book ai didi

highcharts - Highcharts 在导出中添加图例

转载 作者:行者123 更新时间:2023-12-04 17:11:01 27 4
gpt4 key购买 nike

在将图表导出为PNG时,我试图在饼图上添加图例。
这是我的代码:

var chart_23_106;
$(document).ready(function () {
chart_23_106 = new Highcharts.Chart({
chart: { type: 'pie', renderTo: 'container_23_106', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false },
title: { text: 'NRJ' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 },
plotOptions: {
pie: { borderWidth: 0, shadow: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false } }
},
colors: ['#9F9F9F','#BE6EBE','#FFA74F','#B7B7D0','#CBE22A','#00C8C8'],
credits: { enabled: false, text: "Source: Air Normand", href: "" },
exporting:{ buttons: {
printButton: {enabled:false},
exportButton: {menuItems:null,onclick:function(){this.exportChart(null,
{ chart: {reflow: false, width: 400},
title: {text: "Répartition de la Consommation"},
subtitle: {text: "Haute-Normandie"},
plotOptions: {pie: {dataLabels: {enabled: true}, showInLegend: true}},
credits: {enabled: true} }
);}}
}},
lang: {exportButtonTitle: "Export image au format PNG"},
series: [{
type: 'pie',
name: 'Proportion',
data: [
['Activite 1', 684.6],
['Activite 2', 564.7],
['Activite 3', 244.4],
['Activite 4', 42.8],
]
}]
});
});

在函数exportChart中,除plotOptions之外的所有选项都可以提供正确的效果。在PNG文件中,标题已更改,添加了字幕和字幕,但未显示dataLabels和图例...
有人知道为什么吗?
有人可以帮我吗?
谢谢

最佳答案

是的,可以通过禁用图表中的图例并在导出参数(http://api.highcharts.com/highcharts#exporting.chartOptions)中将此选项设置为 Activity 状态来实现。

工作示例:http://jsfiddle.net/xvQNA/

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
legend:{
enabled:false
},
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
showInLegend:true,
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});

关于highcharts - Highcharts 在导出中添加图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13358333/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com