Google Charts no gridlines but I want the ticks to

问题:

I would like to remove the gridlines of the hAxis but with keeping the ticks' little black marker.

My code looks like this:

var optionsSmall = {
        colors: ['#4572A7'],
        hAxis: { minorGridlines: { color: '#000' }, gridlines: { color: 'transparent' }, format:'MM/d/y', textStyle: { fontSize: 9 }  },
        series: { 0: { targetAxisIndex: 1, }, 1: { targetAxisIndex: 0, type: 'line' } },
        vAxes: {
                0: { gridlines: { count: 0 }, textStyle: { fontSize: 9 } },
                1: { gridlines: { count: 8 }, textStyle: { fontSize: 9 } },
        },
        chartArea:{right:80,top:22, bottom:50, width:'100%',height:'100%'},
        tooltip: { trigger: 'none', showColorCode: false }
    };

I'm attaching a picture to represent what I'd like to achieve. The black line is only this thick for dramatisation purposes. Sorry if it's a duplicate, my english is not that perfect to know the right word for that little marker.

回答1:

you could use a line series with values set to zero,
that has blank 'line' annotations
fontSize will control the length of the "tick"

annotations: {style: 'line', textStyle: {fontSize: 10}},

you can "turn off" the extra series with...

colors: ['transparent', ...]
0: {enableInteractivity: false, visibleInLegend: false}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', {role: 'annotation', type: 'string'}, 'y1'],
    [new Date(2017, 6, 6, 1), 0, '', 1000],
    [new Date(2017, 6, 6, 2), 0, '', 2000],
    [new Date(2017, 6, 6, 3), 0, '', 3000],
    [new Date(2017, 6, 6, 4), 0, '', 4000],
    [new Date(2017, 6, 6, 5), 0, '', 5000],
    [new Date(2017, 6, 6, 6), 0, '', 6000]
  ]);


  var optionsSmall = {
    annotations: {style: 'line', textStyle: {fontSize: 10}},
    colors: ['transparent', '#4572A7'],
    hAxis: {minorGridlines: {color: '#000'}, gridlines: {color: 'transparent'}, format:'MM/d/y', textStyle: {fontSize: 9}},
    pointSize: 0,
    series: {
      0: {enableInteractivity: false, visibleInLegend: false},
      1: {targetAxisIndex: 1},
      2: {targetAxisIndex: 0, type: 'line'}
    },
    vAxis: {viewWindow: {min: 0}},
    vAxes: {
      0: {gridlines: {count: 0}, textStyle: {fontSize: 9}},
      1: {gridlines: {count: 8}, textStyle: {fontSize: 9}},
    },
    chartArea:{right:80,top:22, bottom:50, width:'100%',height:'100%'},
    tooltip: {trigger: 'none', showColorCode: false}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, optionsSmall);
});

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