Google 图表：自定义报价

Question

我想在 Google 图表的水平轴上设置自己的刻度。我在下面的尝试中包含了 hAxis.ticks（根据 documentation），但它拒绝工作，因为即使我将它们指定为，刻度仍然不是整数。

我做错了什么？

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = new google.visualization.DataTable();
          data.addColumn('number', 'Day');
          data.addColumn('number', 'myNumber');
          data.addRows([
            [1,17],
            [2,18],
            [3,20]
          ]);
          var options = {width: 800, height: 500, hAxis: {ticks: [1,2,3]}};
          var chart = new google.charts.Line(document.getElementById('chart'));
          chart.draw(data, google.charts.Line.convertOptions(options)); 
        }
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

Answer 1

ticks 不是 material 图表支持的选项。

material --> google.charts.Line -- packages:['line']

经典 --> google.visualization.LineChart -- packages:['corechart']

您需要使用经典图表。
注意：有一个选项可以让经典图表具有相似外观...

theme: 'material'

您可以在此处找到不受支持的选项的完整列表...
Tracking Issue for Material Chart Feature Parity

Google 图表：自定义报价

Google Charts: Custom Ticks

charts

google-visualization