【问题标题】:Problems Creating Line Graph创建折线图的问题
【发布时间】:2016-02-01 00:42:26
【问题描述】:

我正在使用 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>
      

【问题讨论】:

    标签: javascript linegraph


    【解决方案1】:

    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);
        }
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <div id="chart_div"></div>
          

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

    【讨论】:

    • 非常感谢!!!如果我想显示一周中的哪几天而不是星期一、星期二等,我该怎么做才能显示出来?
    • @RichardSiaw,除了我输入的日期外,您无需更改任何内容即可使其正常工作。字符串允许您输入任何您想要的文本。
    • 我明白了!非常感谢您的帮助:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多