如何在react-google-charts

问题描述

这张照片可以帮助您了解我的问题。需要一个橙色的勾。

解决方法

用于绘制图表的数据表中，
我们可以使用带有注释角色的隐藏系列。

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,'A'],['2012-01-01',4,['2014-01-01',26,['2016-01-01',50,['2018-01-01',75,'A']
  ]);

  var options = {
    annotations: {
      boxStyle: {
        fill: '#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'
    },legend: {
      position: 'none'
    },series: {
      1: {
        color: 'transparent',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','tick series');
  data.addRows([
    ['2010-01-01',0],0]
  ]);

  var options = {
    chartArea: {
      left: 80,series: {
      1: {
        color: '#f57c00',lineWidth: 0,pointSize: 12,pointShape: 'square',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>