作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当图例位于图表右侧且其布局设置为垂直时,是否有办法减少图表和图例之间的空白?问题似乎是由绘图区域的宽度引起的,饼图中绘图区域的宽度变得不必要的大,因为图表始终是圆形。图表的宽度和高度无法固定以实现响应能力。
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",
}
});
关于javascript - Highcharts饼图如何减少由于绘图宽度造成的图表和图例之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45194062/
有人可以帮我理解为什么我的饼图百分比计算不正确吗?看截图: 根据我的计算,如 RHS 上所示,支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀!