data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});

对于隐藏的序列，我们使用零值。

这会将注释放置在x轴上。

并且我们给注解一个值，比如'A'，这样就绘制了注解。

要绘制橙色记号并隐藏注释值，请参见

我们使用以下注释选项...

annotations: {
  boxStyle: {
    fill: '#f57c00',
    stroke: '#f57c00',
    strokeWidth: 1
  },
  stem: {
    length: 0
  },
  textStyle: {
    color: 'transparent',
    fontSize: 16
  },
},

可以使用fontSize更改注释的大小。

为了防止绘制隐藏的级数，

我们使用以下选项...

series: {
  1: {
    color: 'transparent',
    visibleInLegend: false,
    enableInteractivity: false
  }
},

请看下面的工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');
  data.addColumn('number', 'hidden series');
  data.addColumn({type:'string', role:'annotation'});
  data.addRows([
    ['2010-01-01', 10, 0, 'A'],
    ['2012-01-01', 4, 0, 'A'],
    ['2014-01-01', 26, 0, 'A'],
    ['2016-01-01', 50, 0, 'A'],
    ['2018-01-01', 75, 0, 'A']
  ]);

  var options = {
    annotations: {
      boxStyle: {
        fill: '#f57c00',
        stroke: '#f57c00',
        strokeWidth: 1
      },
      stem: {
        length: 0
      },
      textStyle: {
        color: 'transparent',
        fontSize: 12
      },
    },
    chartArea: {
      left: 80,
      top: 56,
      right: 32,
      bottom: 80,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      title: 'Date'
    },
    height: '100%',
    legend: {
      position: 'none'
    },
    series: {
      1: {
        color: 'transparent',
        visibleInLegend: false,
        enableInteractivity: false
      }
    },
    title: 'value vs. Date',
    vAxis: {
      title: 'value'
    },
    width: '100%'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
  min-height: 400px;
}

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

编辑

另一种选择是在每个刻度位置绘制正方形点，

根据@dlaliberte的建议

请看下面的工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');
  data.addColumn('number', 'tick series');
  data.addRows([
    ['2010-01-01', 10, 0],
    ['2012-01-01', 4, 0],
    ['2014-01-01', 26, 0],
    ['2016-01-01', 50, 0],
    ['2018-01-01', 75, 0]
  ]);

  var options = {
    chartArea: {
      left: 80,
      top: 56,
      right: 32,
      bottom: 80,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      title: 'Date'
    },
    height: '100%',
    legend: {
      position: 'none'
    },
    series: {
      1: {
        color: '#f57c00',
        lineWidth: 0,
        pointSize: 12,
        pointShape: 'square',
        visibleInLegend: false,
        enableInteractivity: false
      }
    },
    title: 'value vs. Date',
    vAxis: {
      title: 'value'
    },
    width: '100%'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
  min-height: 400px;
}

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63897692

复制

相似问题

问如何在react-google-charts中绘制与刻度相关的样式，如主要刻度、刻度长度、位置、颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react-google-charts中绘制与刻度相关的样式，如主要刻度、刻度长度、位置、颜色EN