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

Question

这张图片可以帮助理解我的问题。需要一个橙色的勾号。

Answer 1

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

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>