API визуализации Google (диаграммы): измените, какую ось использует легенда?

Question

См. Здесь: https://jsfiddle.net/1cLpukxx/1/

Как вы можете видеть, легенда имеет значение Density. Я думаю, что это потому, что все, что я делаю это:

legend: { position: "right" } 

Я хотел бы легенду быть элементы, с цветом, что они находятся в хит-парадах.

Мне кажется, что это должно быть легко, однако я не нашел его в каких-либо примерах (используя легенду оси х как боковую легенду). Я чувствую, что это происходит потому, что я не знаю, что искать, но я отвлекся ...

Answer 1

The 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>