Блог

Главная - Вопросы по программированию - Удаление вертикальной разделительной полосы в столбчатой диаграмме Google

Удаление вертикальной разделительной полосы в столбчатой диаграмме Google

#google-visualization

#google-визуализация

Вопрос:

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

введите описание изображения здесь

Ответ №1:

для столбчатых диаграмм установите hAxis.baselineColor значение 'transparent' , чтобы скрыть вертикальную полосу

установите hAxis.gridlines.count равным нулю, чтобы базовая линия не заменялась линией сетки

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

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

function drawChart(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');
  data.addColumn('number', 'Value');
  data.addRows([
    ['UK', 8.94],
    ['AF', 10.49],
    ['UN', 20.2],
    ['SK', 21.45],
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    hAxis: {
      baselineColor: 'transparent',
      gridlines: {
        count: 0
      }
    },
    vAxis: {
      baselineColor: 'magenta'
    },
    width: 200
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }]);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(chartDiv);
  chart.draw(view, options);
}  
 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>