创建折线图的问题

时间:2016-02-01 00:42:27

标签: javascript linegraph

我正在使用javascript创建折线图,但我无法在Y轴上显示日期...它只能显示数字。有人可以查看我的代码并告诉我如何解决它吗?



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

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Daily Data Usage');

      data.addRows([
        [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],
      ]);

      var options = {
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Total Data Usage (GB)'
        },
        backgroundColor: '#f1f8e9'
      };

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

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

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
select 
    `employee_id`,`date`,`checkin`,`checkout` 
from 
    `attendence` 
where 
DATE(`date`) >= DATE('2012-10-01') 
    and DATE(`date`) < DATE('2012-10-31');
&#13;
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'X');
      data.addColumn('number', 'Daily Data Usage');

      data.addRows([
        ["Jan 1st, 2016", 0],   ["Jan 2nd, 2016", 10],  ["Jan 3rd, 2016", 23],  ["Jan 4th, 2016", 17],  ["Jan 5th, 2016", 18],  ["Jan 6th, 2016", 9],
        ["Jan 7th, 2016", 11],
      ]);

      var options = {
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Total Data Usage (GB)'
        },
        backgroundColor: '#f1f8e9'
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
&#13;
&#13;
&#13;

您需要解决的问题是将第一种类型更改为字符串而不是数字。