Question

设置为仅显示100和-100网格ticks: [-100, 100]，但会显示水平0（零）网格。如何隐藏？

<table class="columns">
  <tr>
    <th>Linear Scale</th>
  </tr>
  <tr>
    <td><div id="linear_div"></div></td>
  </tr>
</table>
<script>
       google.charts.load('current', {'packages':['corechart', 'line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Population');

      data.addRows([
        [new Date(1400, 1, 1),  -44],
        [new Date(1500, 1, 1),  33],
        [new Date(1600, 1, 1),  88],
        [new Date(1700, 1, 1),  100],
        [new Date(1750, 1, 1),  200],


      ]);

      var linearOptions = {
        title: 'World Population Since 1400 A.D. in Linear Scale',
        legend: 'none',
        width: 450,
        height: 500,
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Population (millions)',
          ticks: [-100, 100]
        }
      };


      var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
       linearChart.draw(data, linearOptions);


    }
</script>

https://jsfiddle.net/dnsaudd8/

Answer 1

使用以下选项隐藏0（基线）

baselineColor: 'transparent'

请参阅以下工作代码段...

google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Population');
  data.addRows([
    [new Date(1400, 1, 1),  -44],
    [new Date(1500, 1, 1),  33],
    [new Date(1600, 1, 1),  88],
    [new Date(1700, 1, 1),  100],
    [new Date(1750, 1, 1),  200]
  ]);

  var linearOptions = {
    baselineColor: 'transparent',
    title: 'World Population Since 1400 A.D. in Linear Scale',
    legend: 'none',
    width: 450,
    height: 500,
    hAxis: {
      title: 'Date'
    },
    vAxis: {
      title: 'Population (millions)',
      ticks: [-100, 100]
    }
  };


  var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
  linearChart.draw(data, linearOptions);
}

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

Google Chart隐藏网格零

1 个答案: