如何更改 Google Chart 中的 X 指标？答案

【问题标题】：How can I change X metric in Google Chart?如何更改 Google Chart 中的 X 指标？
【发布时间】：2016-12-10 14:24:16
【问题描述】：

在我的示例中我使用Visualization: Area Chart。

以下代码给出了绘制图表的函数：

 function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

您可以看到，X 轴的日期值以年为单位。

如何更改此指标，例如按月/天？

假设我选择了带有值的列表：day/month/years，通过选择选项我得到的是与所选值相对应的绘制图表。

谷歌图表容易吗？

【问题讨论】：

标签： javascript graph charts google-visualization

【解决方案1】：

使用数据视图类和setColumns方法切换x轴列

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    document.getElementById('view-column').addEventListener('change', drawChart, false);
    drawChart();
  },
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Month', 'Day', 'Sales', 'Expenses'],
    [2013, 9, 5, 1000, 400],
    [2014, 10, 6, 1170, 460],
    [2015, 11, 7, 660, 1120],
    [2016, 12, 8, 1030, 540]
  ]);
  
  var dimension = document.getElementById('view-column');
  
  var view = new google.visualization.DataView(data);
  view.setColumns([
    parseInt(dimension.options[dimension.selectedIndex].value),
    3, 4
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: dimension.options[dimension.selectedIndex].text,
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="view-column">
  <option value="0" selected>Year</option>
  <option value="1">Month</option>
  <option value="2">Day</option>
</select>
<div id="chart_div"></div>

【讨论】：