Google图表没有网格线，但我希望刻度线有黑色标记

Question

我想删除hAxis的网格线，但保留了刻度线＆＃39;小黑标记。

我的代码如下所示：

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 }
    };

我附上一张照片来代表我想要实现的目标。为了戏剧化的目的，黑线只是这么厚。对不起，如果它是重复的，我的英语并不是那么完全知道这个小标记的正确用语。

Answer 1

您可以使用值设置为零的折线系列，
有空白'line'注释的 fontSize将控制“tick”的长度

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

你可以用......“关闭”额外的系列节目。

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

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

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>