0

Google チャートを使用して折れ線グラフを描画し、一定期間の整数の変化をプロットしています。ここに私が使用しているコードがあります:

  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軸の間隔を指定できるGoogle Chart Visualizationの方法はありますか？たとえば、x 軸を (800-900Hrs から 2300-00Hrs) にしたい。現在の複数行ではなく、1行だけがプロットされていますか?

これがライブページです： 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 で隣接するポイントを接続するため、グラフを描画する前にデータを並べ替える必要があります。データを入力する前に並べ替えるか、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 に答える