Google可视化（图表）API：更改图例使用哪个轴？

Question

请参阅：https://jsfiddle.net/1cLpukxx/1/

如您所见，图例为Density的值。我认为那是因为我所做的全部是这样的：

legend: { position: "right" } 

我希望传说是元素，它们在图表中的颜色。

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

Answer 1

在示例中使用的style column覆盖的传说，这就是为什么位置设置 - >'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>