更改Google折线图中的数据标签顺序 [英] Changing the order of data labels in Google Line Charts
问题描述
我有一个折线图，沿着下面的线，我希望能够设置哪个标签在顶部。 （在示例中，希望 dogs位于顶部。）
I have a line chart, along the lines of the below, and I want to be able to set which label is on top. (In the example, would want "dogs" to be on top.)
我意识到我可以手动完成此操作-只需切换列的顺序-但是实际上，我正在处理大型数据集，并且更希望能够简单地指定标签在轴上的显示顺序，而无需重新排列列本身。
I realize I could do this manually -- just by switching the order of the columns -- but in practice I am dealing with large datasets and would much prefer to simply be able to specify the order in which the labels should appear on the axis without rearranging the columns themselves.
有什么办法吗？我在文档中找不到它。
Is there any way to do that? I could not find it in the documentation.
代码示例： https://www.w3schools.com/code/tryit.asp?filename=G2W868VK63KD
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([['X','dogs', 'cats'],
[0, 1, 9],
[1, 2, 7],
[2, 3, 6],
[3, 3, 9],
]);
var options = {
series: {
0: { color: '#e2431e' },
1: { color: '#e7711b' },
2: { color: '#f1ca3a' },
3: { color: '#6f9654' },
4: { color: '#1c91c0' },
5: { color: '#43459d' },
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
推荐答案
没有可用于设置顺序的配置选项。
，但您可以使用数据视图更改列的顺序。
there are no config options available for setting the order.
but you could use a data view to change the order of the columns.
DataView 类具有用于 setColumns 的方法，
，它使用列索引数组。
the DataView class has a method for setColumns,
which takes an array of column indexes.
view.setColumns([0, 2, 1, 4, 3]);
这可以通过使用数组指定顺序来动态完成。
this could be done dynamically, by using an array to specify the order.
请参见以下工作片段，
在这里， columnOrder 数组用于指定列的顺序...
see following working snippet,
here, the columnOrder array is used to specify the order of the columns...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['X', 'cats', 'dogs', 'birds', 'reptiles', 'fish', 'rodents'],
[0, 1, 9, 5, 8, 3, 2],
[1, 2, 7, 3, 9, 4, 3],
[2, 3, 6, 2, 10, 5, 4],
[3, 3, 9, 5, 11, 6, 5],
]);
// specify order
var columnOrder = [
'dogs',
'birds',
'cats',
'fish',
'rodents',
'reptiles',
];
// build data view columns
var viewColumns = [0];
columnOrder.forEach(function (label) {
for (var i = 1; i < data.getNumberOfColumns(); i++) {
if (data.getColumnLabel(i) === label) {
viewColumns.push(i);
}
}
});
// build data view
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
var options = {
height: 400,
series: {
0: { color: '#e2431e' },
1: { color: '#e7711b' },
2: { color: '#f1ca3a' },
3: { color: '#6f9654' },
4: { color: '#1c91c0' },
5: { color: '#43459d' },
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(view, options); // use view to draw chart
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于更改Google折线图中的数据标签顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
