Question

我正在使用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）。所以只绘制了一条1线而不是当前的多条线？

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

Answer 1

您的数据不是按时间顺序排列的，这就是为什么这条线太乱了; LineChart连接DataTable中相邻的点，因此您必须在绘制图表之前对数据进行排序。您可以在输入数据之前对其进行排序，也可以在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);

Answer 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]);

具有固定间隔的Google Visualization折线图

2 个答案: