我正在使用 highcharts 为我们公司渲染组织结构图,在我的网络浏览器中它工作正常,但当我导出到 pdf 时,我的节点中的文本丢失了。 我尝试了多种方法但没有运气。 这是我的小提琴:
Highcharts.chart('container', {
chart: {
height: 200,width:400,
inverted: true
},
title: {
text: ' Ledning'
},
accessibility: {
point: {
descriptionFormat: '{add index 1}. {toNode.name}' +
'{#if (ne toNode.name toNode.id)}, {toNode.id}{/if}, ' +
'reports to {fromNode.id}'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = 'http://google.com';
}
}
}
}
},
series: [{
type: 'organization',
name: 'Factory',
keys: ['from', 'to'],
nodes: [
{id: 'AAA', title:'Important person 1', name: 'John Doe',width:120, height:100},
{id: 'BBB', title:'Important person 2', name: 'Jane Doe',width:120, height:100},
{id: 'CCC', title:'Important person 3', name: 'Matt Black',width:120, height:100},
{id: 'DDD', title:'Important person 4', name: 'Millie Liter',width:120, height:100},
{id: 'EEE', title:'Important person 5', name: 'Nick Some',width:120, height:100},
{id: 'FFF', title:'Important person 6', name: 'Wednesday Parker Hutchinson',width:120, height:100},
{id: 'GGG', title:'Important person 7', name: 'Wendy McDonald',width:120, height:100},
{id: 'HHH', title:'Important person 8', name: 'Natalie Porter',width:120, height:100},
{id: 'III', title:'Important person 9', name: 'Sir Donald Ravensburger',width:120, height:100},
{id: 'JJJ', title:'Important person 10', name: 'Mick Dundee',width:120, height:100},
{id: 'KKK', title:'Important person 10', name: 'Nicki Wicki',width:120, height:100},
],
data: [
['KKK','FFF'],
['KKK','JJJ'],
['KKK','BBB'],
['KKK','III'],
['KKK','EEE'],
['KKK','DDD'],
['KKK','CCC'],
['KKK','GGG'],
['KKK','AAA'],
['KKK','HHH'],
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 1,
color: 'blue',
dataLabels: {
color: 'white'
},
height: 25
}, {
level: 2,
color: 'blue',
dataLabels: {
color: 'white'
},
}, {
level: 3,
color: 'blue',
dataLabels: {
color: 'white'
},
}, {
level: 4,
color: 'blue'
}],
colorByPoint: false,
layout: 'hanging',
color: '#007ad0',
dataLabels: {
color: 'white', style : { fontSize:'25px' }
},
borderColor: 'white',
nodeWidth: 'auto'
}],
tooltip: {
outside: true
},
exporting: {
enabled: true,
allowHTML: true,
menuItemDefinitions: {
downloadPDF: {
onclick: function() {
this.exportChart({
type: 'application/pdf',
width: null
});
},
}
},
sourceWidth: 2000,
sourceHeight: 700,
chartOptions: {
nodes: {
width: '400px',
title: {
style: {
fontSize:'8px'
}
},
name: {
style: {
fontSize:'8px'
}
}
}
}
}
});
(https://jsfiddle.net/pju2bfg7/) 对于网页视图的格式感到抱歉,我必须挤压才能到达小提琴中的导出菜单,格式并不重要,重要的是导出为 pdf。 有谁能够在导出时更改节点文本的字体大小吗?
/R
我尝试使用exporting.chartOptions但没有任何运气!
您需要将导出的图表选项设置为与未导出图表相同的级别。例如:
exporting: {
enabled: true,
allowHTML: true,
chartOptions: {
chart: {
width: 2000,
height: 700
},
series: [
{
dataLabels: {
style: {
fontSize: "12px"
}
}
}
]
}
}
现场演示:https://jsfiddle.net/BlackLabel/8uhkjset/
API 参考: https://api.highcharts.com/highcharts/series.organization