javascript - 如何更改 Google Chart 中的 X 指标？

Question

我在示例中使用可视化:面积图。

下面的代码展示了绘制图表的函数:

 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 轴具有以年为单位的日期值。

我如何改变这个指标，例如按月/日？

假设我选择了包含值的列表:日/月/年，并通过选择选项，我得到的是绘制与所选值相对应的图表。

在 Google Chart 中很容易吗？

Answer 1

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

请参阅以下工作片段...

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>