Как заставить Google Chart Legend отображать значения строк?

Question

Я надеюсь, что этот вопрос можно понять, поскольку я считаю эту тему довольно сложной для объяснения.То, что я ищу, - это решение для 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/

Answer 1

начиная со второй версии, оставьте метку оси X пустой.

var data = google.visualization.arrayToDataTable([
  ['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
  ['', 8.94, 10.49, 19.30, 21.45]
]);

в событии 'ready' диаграммы,
скопировать метки из легенды,
и поместить их под столбцы,
, используя метод диаграммы -> getChartLayoutInterface()

интерфейс макета имеет метод -> getBoundingBox(id)
, этот метод возвращает координаты элементов диаграммы,
, передавая идентификатор элемента.
в этом случае мы хотим знатькоординаты баров.
идентификатор каждого бара структурирован следующим образом.

'bar#0#0'  // <-- first bar

, где первый 0 - номер серии, а второй номер строки.
Как только мы узнаем координаты столбцов,
мы можем разместить скопированные надписи под ними.

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
    ['', 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 container = document.getElementById('columnchart_values');
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function (gglClick) {
    // chart svg
    var svg = container.getElementsByTagName('svg')[0];

    // chart layout
    var chartLayout = chart.getChartLayoutInterface();

    // get all chart labels, chart title will be first, legend labels next
    var labels = container.getElementsByTagName('text');

    // process each series in the data table
    for (var series = 1; series < data.getNumberOfColumns(); series++) {
      // get bar bounds
      var barBounds = chartLayout.getBoundingBox('bar#' + (series - 1) + '#0');

      // copy legend label
      var barLabel = labels[series].cloneNode(true);

      // padding above label
      var labelPadding = 4;

      // center align label
      barLabel.setAttribute('text-anchor', 'middle');

      // set label x,y coordinates
      barLabel.setAttribute('x', barBounds.left + (barBounds.width / 2));
      barLabel.setAttribute('y', barBounds.top + barBounds.height + parseFloat(barLabel.getAttribute('font-size')) + labelPadding);

      // add label to chart svg
      svg.appendChild(barLabel);
    }
  });

  chart.draw(view, options);
});

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

примечание: в приведенном выше примере предполагается, что график будет иметь опцию заголовка.