如何隐藏Google图表的第一条网格线

问题描述 投票:1回答:2

我需要隐藏图表的第一条网格线

here是示例

这是我现在正在使用的选项

var options = {
              colors:['#A6A6A6'],
              width: 450,
              height: 250,
              legend: {
                  position: "none"
              },
              chartArea:{left:30,top:20,width:400,height:200},
              vAxis: {
                  gridlines: {color: 'none'},
              },
              hAxis: {
                  textPosition: 'none',
                  gridlines: {color: 'none'},
              },
              bar: {groupWidth: "50%"},
          };
charts google-visualization
2个回答
0
投票

使用您提供的选项,第一个网格线不会出现...?

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Category', 'value'],
    ['a', 2924],
    ['b', 2075],
    ['c', 2516],
    ['d', 2153],
    ['e', 2348],
    ['f', 1925]
  ]);

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

  var options = {
    colors:['#A6A6A6'],
    width: 450,
    height: 250,
    legend: {
      position: "none"
    },
    chartArea:{left:30,top:20,width:400,height:200},
    vAxis: {
      gridlines: {color: 'none'},
    },
    hAxis: {
      textPosition: 'none',
      gridlines: {color: 'none'},
    },
    bar: {groupWidth: "50%"},
  };

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

0
投票

@@ WhiteHat我仍然得到黑线,这是我的代码:

function init() {
    google.load("visualization", "1.1", { packages:["corechart"], callback: 'drawCharts' });
}

function drawCharts() {
                drawChart1('chart1');
            }

function drawChart1(containerId) {
  var options = {
      colors:['#002060'],
      width: 450,
      height: 200,
      legend: {
          position: "none"
      },
      chartArea:{left:40,top:20,width:350,height:200},
      vAxis: {
          gridlines: {color: 'none'},
          textStyle: {
              fontSize: 9,
          }
      },
      hAxis: {
          textPosition: 'none',
          gridlines: {color: 'none'},
      },
      annotations: {
        stem: {
          color: 'none'
        },
        alwaysOutside : true,
        textStyle: {
          fontSize: 9,
          color: '#000',
          auraColor: 'none'
        },
        style: 'point',
      },
      bar: {groupWidth: "50%"},
  };
  var dataArray = [];
  dataArray.push(["Mix", "Useful surface (m²)", { role: 'annotation' }]);
  dataSurface.forEach(function(item, index){
    dataArray.push([item["mix"], parseFloat(item["useful_surface"]), parseFloat(item["useful_surface"])]);
  });
  var data = google.visualization.arrayToDataTable(dataArray);
  var formatter = new google.visualization.NumberFormat({
      pattern: '#.00'
  });
  formatter.format(data, 2);
  var chart = new google.visualization.BarChart(document.getElementById(containerId));
  chart.draw(data, options);
}

...

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<body onload="init()">
   <div id="chart1"></div>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.