我正在使用Google图表(piechart),并希望在新行上开始每个图例-不同于下图:
这是我的代码:
var data = new google.visualization.arrayToDataTable(chartData, false);
var optionsErrorDetails = {
title: 'My Piechart',
fontSize: 10
,
pieHole: 0.3,
legend:
{
position: 'top',
alignment: 'start',
textStyle: {
fontSize: 8
},
},
};
var chartErrorDetails = new google.visualization.PieChart(document.getElementById('errorDetails'));
chartErrorDetails.draw(data, optionsErrorDetails);
答案 0 :(得分:2)
确保每个图例标签显示在新行上的唯一方法是将图例放置在右侧,
参见以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var chartData = [
['Category', 'Value'],
['Category Alpha', 46.7],
['Category Beta', 53.3],
];
var data = google.visualization.arrayToDataTable(chartData, false);
var optionsErrorDetails = {
title: 'My Piechart',
fontSize: 10,
pieHole: 0.3,
legend: {
position: 'right',
textStyle: {
fontSize: 8
},
},
};
var chartErrorDetails = new google.visualization.PieChart(document.getElementById('errorDetails'));
chartErrorDetails.draw(data, optionsErrorDetails);
});
#errorDetails {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="errorDetails"></div>
有一个maxLines
选项在legend.position
为'top'
时有效。
但这仅允许行,不会强制它们,
来自docs ...
legend.maxLines -图例中的最大行数。将此数字设置为大于1的数字可向图例添加行。注意:用于确定实际渲染的行数的确切逻辑仍在不断变化。
注意:arrayToDataTable
是静态方法,不需要new
关键字...
var data = google.visualization.arrayToDataTable(chartData, false);
编辑
您可以尝试手动移动标签,
请参阅以下工作片段以获取大致示例...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var chartData = [
['Category', 'Value'],
['Category C', 50],
['Category B', 50],
['Category A', 50],
];
var data = google.visualization.arrayToDataTable(chartData, false);
var optionsErrorDetails = {
chartArea: {
bottom: 72
},
title: 'My Piechart',
fontSize: 10,
pieHole: 0.3,
legend: {
position: 'bottom',
alignment: 'middle',
textStyle: {
fontSize: 8
},
},
};
var container = document.getElementById('errorDetails');
var chartErrorDetails = new google.visualization.PieChart(container);
google.visualization.events.addListener(chartErrorDetails, 'ready', function () {
var circles = container.getElementsByTagName('circle');
var labels = container.getElementsByTagName('text');
var labelIndex = -1;
var fontSize;
var radius;
var xCoordCircle;
var xCoordLabel;
var yCoordLabel;
var yCoordCircle;
Array.prototype.forEach.call(labels, function(label) {
if ((label.getAttribute('text-anchor') === 'start') && (label.getAttribute('fill') !== '#ffffff')) {
labelIndex++;
if (labelIndex === 0) {
radius = parseFloat(circles[labelIndex].getAttribute('r'));
xCoordCircle = circles[labelIndex].getAttribute('cx');
xCoordLabel = label.getAttribute('x');
} else {
fontSize = parseFloat(label.getAttribute('font-size')) * labelIndex;
yCoordLabel = parseFloat(label.getAttribute('y'));
label.setAttribute('x', xCoordLabel);
label.setAttribute('y', (yCoordLabel - fontSize - (radius * labelIndex)));
yCoordCircle = parseFloat(circles[labelIndex].getAttribute('cy'));
circles[labelIndex].setAttribute('cx', xCoordCircle);
circles[labelIndex].setAttribute('cy', yCoordCircle - fontSize - (radius * labelIndex));
}
}
});
});
chartErrorDetails.draw(data, optionsErrorDetails);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="errorDetails"></div>
答案 1 :(得分:-1)
我不知道这是否有帮助,但是对于Highcharts,图例项目以垂直显示的方式,您必须说:layout:'vertical'。对于Google图表,这可能以相同的方式工作。 (见下文)
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
fontweight: 'normal',
margin: -4,
padding: 0
},