Я надеюсь, что этот вопрос можно понять, поскольку я считаю эту тему довольно сложной для объяснения.То, что я ищу, - это решение для Google (столбца) Chart , в котором на графике показаны обе оси X и легенда со значениями , как это иногда делает круговая диаграмма.Большинство примеров, которые я нашел, просто выключило легенду.
Вот что я получил до сих пор: Первый пример подгонки оси x:
Легенда просто показывает «Плотность», что имеет смысл, но я также ищу все металлы в легенде.Таким образом, я изменил порядок набора данных, чтобы закончить с этим:
И здесь ось x показывает плотность вместо металлов.Итак, я ищу что-то вроде этого:
В любом случае, будь то манипулирование легендой или манипулирование осью,мне.Любые идеи, как действовать?
Источники
Первая версия
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
Моя скрипка: https://jsfiddle.net/927pjLvb/2/
Вторая версия:
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Copper", "Silver", "Gold", "Platinum"],
["Density", 8.94, 10.49, 19.30, 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,
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
bar: {groupWidth: "95%"},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
Моя скрипка: https://jsfiddle.net/8jaL9kf3/