在 Google 图表的 X 垂直方向显示月份名称

Question

目标：
在 google 的折线图的 X 垂直线上显示月份名称。

问题：
您如何能够在 X 垂直行中显示月份名称而不是使用月份编号？

Jsfiddle:
https://jsfiddle.net/6fckmsdL/18/

谢谢！

      google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Month');
      data.addColumn('number', "2017-Average Temperature");
      data.addColumn('number', "2018-Average Hours of Daylight");
        data.addColumn({type: 'string', role: 'tooltip'});

      data.addRows([
        [1,  -.5,  5.7, 'January'],
        [2,   .4,  8.7, 'January'],
        [3,   .5,   12, 'January'],
        [4,  2.9, 15.3, 'January'],
        [5,  6.3, 18.6, 'January']

      ]);

      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };


      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
        button.innerText = 'Change to Classic';
        button.onclick = drawClassicChart;
      }

      drawMaterialChart();

    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <br><br>
  <div id="chart_div"></div>

Answer 1

如评论部分所述，尝试将月份名称添加为 data.addRows 数组中的第一个索引，并将第一个 data.addColumn 的 type 设置为 string 而不是一个月。让我告诉你怎么做。

var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number', "2017-Average Temperature");
  data.addColumn('number', "2018-Average Hours of Daylight");
    data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    ['January',  -.5,  5.7, 'January'],
    ['Feburary',   .4,  8.7, 'January'],
    ['March',   .5,   12, 'January'],
    ['April',  2.9, 15.3, 'January'],
    ['May',  6.3, 18.6, 'January']

  ]);

您也可以查看here。

如果您愿意，您可以以类似的方式添加剩余的月份。

谢谢

在 Google 图表的 X 垂直方向显示月份名称

Show Month Name in X Vertical at Google Chart

html

javascript

linechart