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", 
    } 
}

来源

2017-07-19 losaliens

所以你想实现类似于这个图表的东西？ https://jsfiddle.net/gdh86chg/6/ –

乍一看是，问题在于，当您增加图表容器的大小时，图例和实际图表之间的距离也会增加。 – losaliens

所以你应该可以使用attr（）在图表加载和重绘时移动图例：https：//jsfiddle.net/gdh86chg/10/ –

正如我在我的评论中提到，你应该能够继续前进图表负荷你的传奇，并使用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/11/

来源

2017-07-20 12:42:55

我也将http://api.highcharts.com/highcharts/Element.attr添加到您的答案。仅仅通过查看API，支持哪些属性并不是很清楚，所以解决方案对我来说并不明显。谢谢！ – losaliens

此外，图例x：-50的属性不再需要。 – losaliens

感谢您的评论，我编辑了我的答案 –

Highcharts Pie chart如何减少由于绘图宽度引起的图表和图例之间的空间

回答

相关问题