GoogleグラフでXメトリックを変更するにはどうすればよいですか？

Question

私の例では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でリストを選択し、オプションIを選択することによって、選択されたチャートが選択されたチャートに対応することを仮定します。

Google Chartでは簡単ですか？

Answer 1

... 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>

をデータビュークラスと setColumns方法を使用