0

我正在使用 Google Chart 绘制折线图来绘制一段时间内的整数变化。这是我正在使用的代码：

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Leads');
data.addRow([new Date(1377011402000),5]);     
data.addRow([new Date(1376967661000),12]);
//for full data see http://ubuntuone.com/3NMEtWYkhQSCHx4RERVcgq
                 

    var options = {
      title: 'Company Performance',
          fontSize: '12px',
          curveType: 'function',
          pointSize: 5,
          hAxis: {title: 'Week Report',
                  titleTextStyle: {color: '#FF0000'}
                  },
          vAxis: {title: 'Leads',  
                  titleTextStyle: {color: '#FF0000'}}
    };

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

现在，这就是图表当前的样子

如果你试图理解这一点，它不会。那么谷歌图表可视化中有一种方法可以使用它来指定x轴间隔吗？例如，我希望 x 轴为（800-900Hrs 到 2300-00Hrs）。所以只绘制了一条 1line 而不是当前的多条线？

这是实时页面： http: //ubuntuone.com/3NMEtWYkhQSCHx4RERVcgq

4

2 回答 2

2

除了对数据进行排序之外，听起来您还想使用 timeofday 类型的值，最少记录在：https ://google-developers.appspot.com/chart/interactive/docs/reference?hl=en#DataTable_getValue

您应该能够使用如下值：

data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Leads');
data.addRow([[0, 0, 0, 1377011402000],5]);     
data.addRow([[0, 0, 0, 1376967661000],12]);
于 2013-08-22T20:34:54.223 回答
2

你的数据没有按时间顺序排列，这就是为什么线路如此混乱的原因；LineChart 连接数据表中相邻的点，因此您必须在绘制图表之前对数据进行排序。您可以在输入数据之前对其进行排序，也可以在 DataTable 上调用 #sort 方法：

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Leads');

/*
 * populate rows
 */

// sort data by Time
data.sort(0);
于 2013-08-22T19:54:17.877 回答