График Google рисует линию на краю графика - PullRequest
Новая
       16

График Google рисует линию на краю графика

0 голосов
/ 07 ноября 2018

Линии сетки 0 и -5 на vaxis бесполезны, так как мои данные около -10. Однако не добавляет -15. Любая помощь? Я уверен, что должен быть вариант.

Проверьте это здесь: https://jsfiddle.net/h6u4pa2d/9/

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [1, -10],   [2, -10.5],  [3, -10.25],
    [4, -9.75],   [5, -10],  [6, -10.25]
  ]);

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

1 Ответ

0 голосов
/ 07 ноября 2018

вы можете использовать опцию конфигурации vAxis.viewWindow, чтобы установить значения min & max для оси 

  viewWindow: {
    min: -10.5,
    max: -9.75
  }

, если вы хотите избежать жесткого кодирования значений,
Вы можете использовать метод таблицы данных -> getColumnRange(colIndex)

это вернет объект со значениями min & max столбца 

var range = data.getColumnRange(1);

  viewWindow: {
    min: range.min,
    max: range.max
  }

или если вы хотите маленькую комнату по краям 

  viewWindow: {
    min: Math.floor(range.min),
    max: Math.ceil(range.max)
  }

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

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

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [1, -10],   [2, -10.5],  [3, -10.25],
    [4, -9.75],   [5, -10],  [6, -10.25]
  ]);

  var range = data.getColumnRange(1);

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity',
      viewWindow: {
        min: Math.floor(range.min),
        max: Math.ceil(range.max)
      }
    }
  };

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