Как я могу скрыть метки hAxis в гистограмме материала Google?

Question

Как я могу скрыть метки hAxis в гистограмме материала Google?

1

Я хотел бы показать сложную гистограмму с группированными столбцами и только одну строку меток горизонтальной оси. Из того, что я нашел, что это не возможно в настоящее время, чтобы показать многослойную BarChart с сгруппированных баров с использованием visualization.BarChart от визуализации API Google V44, но это возможно с материалом Bar диаграммы с помощью series вариант массива.

Например:

google.charts.load('44', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nothing');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Red');

  data.addRows([
    ['Row 1', 14, 1, 3, 0, 1, 36],
    ['Row 2', 10, 1, 0, 2, 2, 23],
  ]);


  var options = {
    legend: {
      position: 'none'
    },
    isStacked: true,
    series: {
      5: {
        targetAxisIndex: 1
      }
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 40
      },
      textPosition: 'none',
      ticks: [null],
      title: 'Hide one of the axis values	'
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>

Моя проблема заключается в том, что диапазон/тики горизонтальной оси совпадают для обеих полос, поэтому отображение 2 с одинаковыми значениями тика на дне является избыточным. С нематериалом BarChart textPosition: 'none' может использоваться для скрытия меток для оси, но эта опция в настоящее время не поддерживается в диаграммах материальных диаграмм. Есть ли другой способ, чтобы одна из этих меток/тиков оси могла быть скрыта в не-хаки?

Обратите внимание, что textPosition не влияет.

CLL 13 сен. 2017, в 22:51

Источник

Теги:

javascript

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Answer 1 · 2017-09-14T11-53-00.000Z

не удалось найти способ скрыть отметки

но вы можете переместить их на верх

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

google.charts.load('44', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nothing');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Red');

  data.addRows([
    ['Row 1', 14, 1, 3, 0, 1, 36],
    ['Row 2', 10, 1, 0, 2, 2, 23]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    isStacked: true,
    series: {
      5: {
        axis: 'red'
      }
    },
    axes: {
      x: {
        red: {
          label: '',
          side: 'top'
        }
      }
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 40
      },
      title: 'Hide one of the axis values'
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>

ОБНОВИТЬ

другой вариант - изменить диаграмму svg вручную,
как только 'ready' событие срабатывает

здесь верхние метки скрыты при рисовании диаграммы...

google.charts.load('44', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nothing');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Red');

  data.addRows([
    ['Row 1', 14, 1, 3, 0, 1, 36],
    ['Row 2', 10, 1, 0, 2, 2, 23]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    isStacked: true,
    series: {
      5: {
        axis: 'red'
      }
    },
    axes: {
      x: {
        red: {
          label: '',
          side: 'top'
        }
      }
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 40
      },
      title: 'Hide one of the axis values'
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
  google.visualization.events.addListener(chart, 'ready', function () {
    $.each($('#stacked-grouped-chart text'), function (index, label) {
      if (parseFloat($(label).attr('y')) < 20) {
        $(label).attr('fill', 'none');
      }
    });
  });
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>

Это определенно улучшение. Я начинаю думать, что это самое близкое, что мы получим.
Единственный вариант, о котором я могу подумать, был бы хакерским , см. ОБНОВЛЕНИЕ выше ...