Highcharts Pie chart如何减少由于绘图宽度引起的图表和图例之间的空间
问题描述:
当图例位于图表右侧并设置了其布局时,是否可以减少图表和图例之间的空白区域垂直? 看起来问题是由于绘图区域的宽度造成的,因为图表总是会变成圆形,这在饼图中变得不必要的大。 无法修复图表的宽度和高度以实现响应。Highcharts Pie chart如何减少由于绘图宽度引起的图表和图例之间的空间
https://jsfiddle.net/rredondo/gdh86chg/
图表选项包括:
{
chart: {
type: 'pie',
plotBorderWidth: 1,
plotBorderColor: '#3F4044',
borderColor: '#AAAAAA',
borderWidth: 2
},
series: [{
name: 'Incidents',
data: [{
name: "Critical",
y: 1,
color: "#FF0000"
}, {
name: "Severe",
y: 8,
color: "#F57622"
}, {
name: "Major",
y: 13,
color: "#F0A401"
}, {
name: "Minor",
y: 25,
color: "#F0C801"
}, {
name: "Information",
y: 30,
color: "#4AB6FF"
}],
size: '80%',
innerSize: '60%',
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
}
}
答
正如我在我的评论中提到,你应该能够继续前进图表负荷你的传奇,并使用ATTR()重绘:
http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/chart.events.redraw http://api.highcharts.com/highcharts/Element.attr
// Create the chart
var updateLegend = function(chart) {
var center = chart.series[0].center;
console.log(chart.legend)
chart.legend.group.attr({
translateX: center[0] + center[2]/2
});
}
var chart = Highcharts.chart('container', {
chart: {
type: 'pie',
plotBorderColor: '#3F4044',
borderColor: '#AAAAAA',
borderWidth: 2,
marginRight: 0,
marginLeft: 0,
events: {
load: function() {
updateLegend(this)
},
redraw: function() {
updateLegend(this);
}
}
},
series: [{
name: 'Incidents',
data: [{
name: "Critical",
y: 1,
color: "#FF0000"
}, {
name: "Severe",
y: 8,
color: "#F57622"
}, {
name: "Major",
y: 13,
color: "#F0A401"
}, {
name: "Minor",
y: 25,
color: "#F0C801"
}, {
name: "Information",
y: 30,
color: "#4AB6FF"
}],
size: '80%',
innerSize: '60%',
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
}
});
所以你想实现类似于这个图表的东西? https://jsfiddle.net/gdh86chg/6/ –
乍一看是,问题在于,当您增加图表容器的大小时,图例和实际图表之间的距离也会增加。 – losaliens
所以你应该可以使用attr()在图表加载和重绘时移动图例:https://jsfiddle.net/gdh86chg/10/ –