Google Visualizations (Charts) API：更改图例使用的轴？

Question

见这里： https : //jsfiddle.net/1cLpukxx/1/

如您所见，图例是Density值。 我想那是因为我所做的就是：

legend: { position: "right" }

我希望图例成为元素，它们在图表中的颜色。

我觉得这应该很容易，但是我还没有在任何示例中找到它（使用 x 轴图例作为侧面图例）。 我觉得这是因为我不知道要搜索什么，但我离题了......

Answer 1

示例中使用的样式列覆盖了图例，这就是将位置设置为 --> 'none'

一种选择是将行更改为列，如下例所示。
这会创建单独的系列，并允许在配置选项中设置colors数组。
但是，这会导致其他问题，例如列的间距。

 google.charts.load("current", { callback: drawChart, packages: ['corechart'] }); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Metal", "Copper", "Silver", "Gold", "Platinum"], ["Copper", 8.94, null, null, null], ["Silver", null, 10.49, null, null], ["Gold", null, null, 19.30, null], ["Platinum", null, null, null, 21.45] ]); var view = new google.visualization.DataView(data); view.setColumns([ 0, 1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}, 3, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}, 4, {calc: "stringify", sourceColumn: 4, type: "string", role: "annotation"}, ]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, legend: {alignment: "right"}, colors: ['#b87333', 'silver', 'gold', '#e5e4e2'] }; var chart = new google.visualization.ColumnChart(document.getElementById("chart_div")); chart.draw(view, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>