谷歌图表没有网格线，但我想滴答有一个黑色的标记 [英] Google Charts no gridlines but I want the ticks to have a black marker

问题描述

我想删除hAxis的网格线，但保留蜱的小黑记号。

我的代码如下所示：

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

我附上了一张照片来表示我想要达到的目标。为了戏剧化的目的，黑线只有这么厚。对不起，如果它是重复的，我的英语是不完美的知道那个小标记的正确词。

$ b

解决方案

您可以使用值为零的行系列，

具有空白'line'注解

fontSize 将控制tick的长度

 注解：{style：'line'，textStyle：{fontSize：10}}，
  

您可以关闭额外的系列...

 颜色：['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]，[新日期（2017,6,6,2），0，''，2000]，[新日期（2017，6，6，3）， 0，''，3000]，[新日期（2017,6,6,4），0，''，4000]，[新日期（2017，6,6,5），0，''，5000]， [新日期（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％'}，工具提示：{trigger：'none'，showColorCode：false}}; var chart = new google.visualization.LineChart（document.getElementById（'chart'））; < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart>< / div>

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.

解决方案

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>

这篇关于谷歌图表没有网格线，但我想滴答有一个黑色的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！