2014/08/11

[jQuery]jqplotを使って複数グラフを描画する

一つの表上で複数グラフを表示するには、どうすればいいのだろうか？

下のように組んだらできた

<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./jquery.jqplot.min.js"></script>
<script src="./jqplot.dateAxisRenderer.min.js"></script>
<script>
jQuery(function($){
  $.jqplot('chartdiv',
    [
      [
        ['2014/08/01', 2],
        ['2014/08/02',5.12],
        ['2014/08/03',13.1],
        ['2014/08/04',13.1],
        ['2014/08/05',13.1],
        ['2014/08/06',13.1],
        ['2014/08/07',13.1],
        ['2014/08/08',13.1],
        ['2014/08/09',13.1],
        ['2014/08/10',13.1],
        ['2014/08/11',13.1],
        ['2014/08/12',13.1],
        ['2014/08/13',13.1],
        ['2014/08/14',13.1],
        ['2014/08/15',13.1],
        ['2014/08/16',13.1],
        ['2014/08/17',13.1],
        ['2014/08/18',13.1],
        ['2014/08/19',13.1],
        ['2014/08/20',13.1],
        ['2014/08/21',13.1],
        ['2014/08/22',13.1],
        ['2014/08/23',13.1],
        ['2014/08/24',13.1],
        ['2014/08/25',13.1],
        ['2014/08/26',13.1],
        ['2014/08/27',13.1],
        ['2014/08/28',13.1],
        ['2014/08/29',19.1],
        ['2014/08/30',0],
        ['2014/08/31',0]
      ],
      [
        ['2014/08/01', 12],
        ['2014/08/02',15.12],
        ['2014/08/03',23.1],
        ['2014/08/04',23.1],
        ['2014/08/05',23.1],
        ['2014/08/06',23.1],
        ['2014/08/07',23.1],
        ['2014/08/08',23.1],
        ['2014/08/09',23.1],
        ['2014/08/10',23.1],
        ['2014/08/11',23.1],
        ['2014/08/12',23.1],
        ['2014/08/13',23.1],
        ['2014/08/14',23.1],
        ['2014/08/15',23.1],
        ['2014/08/16',23.1],
        ['2014/08/17',23.1],
        ['2014/08/18',23.1],
        ['2014/08/19',23.1],
        ['2014/08/20',23.1],
        ['2014/08/21',23.1],
        ['2014/08/22',23.1],
        ['2014/08/23',23.1],
        ['2014/08/24',23.1],
        ['2014/08/25',23.1],
        ['2014/08/26',23.1],
        ['2014/08/27',23.1],
        ['2014/08/28',23.1],
        ['2014/08/29',29.1],
        ['2014/08/30',0],
        ['2014/08/31',0]
      ],
      [
        ['2014/08/01', 13],
        ['2014/08/02',16.12],
        ['2014/08/03',24.1],
        ['2014/08/04',24.1],
        ['2014/08/05',25.1],
        ['2014/08/06',25.1],
        ['2014/08/07',25.1],
        ['2014/08/08',25.1],
        ['2014/08/09',25.1],
        ['2014/08/10',25.1],
        ['2014/08/11',25.1],
        ['2014/08/12',25.1],
        ['2014/08/13',25.1],
        ['2014/08/14',25.1],
        ['2014/08/15',25.1],
        ['2014/08/16',25.1],
        ['2014/08/17',25.1],
        ['2014/08/18',25.1],
        ['2014/08/19',25.1],
        ['2014/08/20',25.1],
        ['2014/08/21',25.1],
        ['2014/08/22',25.1],
        ['2014/08/23',25.1],
        ['2014/08/24',25.1],
        ['2014/08/25',25.1],
        ['2014/08/26',25.1],
        ['2014/08/27',25.1],
        ['2014/08/28',25.1],
        ['2014/08/29',30.1],
        ['2014/08/30',0.1],
        ['2014/08/31',0.1]
      ]
    ],
    {
      axes:{
        xaxis:{
          renderer:jQuery.jqplot.DateAxisRenderer,
          min:'2014/08/01',
          max:'2014/08/31',
          tickOptions:{
            formatString: '%#d日',
          },
          tickInterval: '1 days'
        },
        yaxis:{
          min:0,
        }
      },
      grid: {
        background:'white'
      },
      series:[{color:'red'},{color:'blue'},{color:'pink'}]
    }
  );
});
</script>
<div id="chartdiv" style="height:500px;width:1000px; "></div>
第二引数を下のように配列で設定すればおｋ
[
  [
    ['2014/08/01', 2],
    ['2014/08/02',5.12],
    ['2014/08/03',13.1],
    ['2014/08/04',13.1],
    ['2014/08/05',13.1],
    ['2014/08/06',13.1],
    ['2014/08/07',13.1],
    ['2014/08/08',13.1],
    ['2014/08/09',13.1],
    ['2014/08/10',13.1],
    ['2014/08/11',13.1],
    ['2014/08/12',13.1],
    ['2014/08/13',13.1],
    ['2014/08/14',13.1],
    ['2014/08/15',13.1],
    ['2014/08/16',13.1],
    ['2014/08/17',13.1],
    ['2014/08/18',13.1],
    ['2014/08/19',13.1],
    ['2014/08/20',13.1],
    ['2014/08/21',13.1],
    ['2014/08/22',13.1],
    ['2014/08/23',13.1],
    ['2014/08/24',13.1],
    ['2014/08/25',13.1],
    ['2014/08/26',13.1],
    ['2014/08/27',13.1],
    ['2014/08/28',13.1],
    ['2014/08/29',19.1],
    ['2014/08/30',0],
    ['2014/08/31',0]
  ],
  [
    ['2014/08/01', 12],
    ['2014/08/02',15.12],
    ['2014/08/03',23.1],
    ['2014/08/04',23.1],
    ['2014/08/05',23.1],
    ['2014/08/06',23.1],
    ['2014/08/07',23.1],
    ['2014/08/08',23.1],
    ['2014/08/09',23.1],
    ['2014/08/10',23.1],
    ['2014/08/11',23.1],
    ['2014/08/12',23.1],
    ['2014/08/13',23.1],
    ['2014/08/14',23.1],
    ['2014/08/15',23.1],
    ['2014/08/16',23.1],
    ['2014/08/17',23.1],
    ['2014/08/18',23.1],
    ['2014/08/19',23.1],
    ['2014/08/20',23.1],
    ['2014/08/21',23.1],
    ['2014/08/22',23.1],
    ['2014/08/23',23.1],
    ['2014/08/24',23.1],
    ['2014/08/25',23.1],
    ['2014/08/26',23.1],
    ['2014/08/27',23.1],
    ['2014/08/28',23.1],
    ['2014/08/29',29.1],
    ['2014/08/30',0],
    ['2014/08/31',0]
  ],
  [
    ['2014/08/01', 13],
    ['2014/08/02',16.12],
    ['2014/08/03',24.1],
    ['2014/08/04',24.1],
    ['2014/08/05',25.1],
    ['2014/08/06',25.1],
    ['2014/08/07',25.1],
    ['2014/08/08',25.1],
    ['2014/08/09',25.1],
    ['2014/08/10',25.1],
    ['2014/08/11',25.1],
    ['2014/08/12',25.1],
    ['2014/08/13',25.1],
    ['2014/08/14',25.1],
    ['2014/08/15',25.1],
    ['2014/08/16',25.1],
    ['2014/08/17',25.1],
    ['2014/08/18',25.1],
    ['2014/08/19',25.1],
    ['2014/08/20',25.1],
    ['2014/08/21',25.1],
    ['2014/08/22',25.1],
    ['2014/08/23',25.1],
    ['2014/08/24',25.1],
    ['2014/08/25',25.1],
    ['2014/08/26',25.1],
    ['2014/08/27',25.1],
    ['2014/08/28',25.1],
    ['2014/08/29',30.1],
    ['2014/08/30',0.1],
    ['2014/08/31',0.1]
  ]
]
ちなみに、複数グラフを表示すると当然のごとく線の色を変更したくなるのですが、その時は、
{
  series:[{color:'red'},{color:'blue'},{color:'pink'}]
}
とすることで変更することができます。

さらに、グラフの背景を変更したい場合は、
{
  grid: {
    background:'white'
  }
}
とすることで変更することができます。

時刻: 13:30
ラベル:

0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)