プラグイン .crossPointer(op)

v0.07 チャート領域にカーソルが入ると十字ポインターが現れます

• op.lineColor 線の色 (default 'rgba(255, 255, 120, 0.7)')
• op.xColor 横線の色 (default 'rgba(255, 255, 120, 0.7)')
• op.yColor 縦線の色 (default 'rgba(255, 255, 120, 0.7)')
• op.lineWidth 線の幅 (default 1)
• op.xWidth 横線の幅 (default 1)
• op.yWidth 縦線の幅 (default 1)
• op.autostart 自動開始 "yes" | "no" (default yes)　@sample
• op.onCpDraw クロスポインター描画後に実行するcallback
• ccchart.pointerStart() 開始 @sample
• ccchart.pointerStop() 停止 @sample
• ccchart.setLineColor(op) lineColor, xColor, yColor を設定する@sample
• ccchart.setLineWidth(op) lineWidth, xWidth, yWidth を設定する@sample

<script src="http://ccchart.org/js/ccchart-v1.08.2.js" charset="utf-8"></script>
<script src="http://ccchart.org/plugins/pointer/cross/ccchart.cross-pointer.js" charset="utf-8"></script>
<canvas id="hoge1"></canvas>
<script>
var chartdata1 = {
   "config": {
    "title": "移動する縦横クロスラインをプラグイン化",
    "subTitle": "チャート領域にカーソルが入ると十字ポインターが現れます",
    "useVal": "yes",
    "type": "line"
  },
   "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["ジュース",60,435,456,352,567,678,1260],
    ["ウーロン",200,123,312,200,402,300,512]
  ]
};
 ccchart
    .init('hoge1', chartdata1)
    .crossPointer()
</script>

    <script>
    var chartdata4 = {

      "config": {
        "title": "crossPointerの引数",
        "subTitle": "lineWidthで線の幅を変えられます",
        "useVal": "yes",
        "type": "bar"
      },

      "data": [
        ["年度",2007,2008,2009,2010,2011,2012,2013],
        ["ジュース",60,435,456,352,567,678,1260],
        ["ウーロン",200,123,312,200,402,300,512]
      ]
    };

    ccchart
        .init('hoge4', chartdata4)
        .crossPointer({
          lineWidth: 3
        })
    </script>

    <script>
    var chartdata3 = {

      "config": {
        "title": "crossPointerの引数",
        "subTitle": "lineColorで線の色を変えられます",
        "useVal": "yes",
        "type": "bar"
      },

      "data": [
        ["年度",2007,2008,2009,2010,2011,2012,2013],
        ["ジュース",60,435,456,352,567,678,1260],
        ["ウーロン",200,123,312,200,402,300,512]
      ]
    };

    ccchart
        .init('hoge3', chartdata3)
        .crossPointer({
          lineColor: 'orange'
        })
    </script>

<script src="http://ccchart.org/js/ccchart-v1.08.2.js" charset="utf-8"></script>
<script src="http://ccchart.org/plugins/pointer/cross/ccchart.cross-pointer.js" charset="utf-8"></script>
<canvas id="hoge1"></canvas>
<script>
var chartdata2 = {

   "config": {
     "title": "crossPointerの引数",
     "subTitle": "xColorやyWidthなどで色や太さを縦横別々に変えられます",
     "useVal": "yes",
     "type": "bar"
   },
   "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["ジュース",60,435,456,352,567,678,1260],
    ["ウーロン",200,123,312,200,402,300,512]
  ]
};
 ccchart
    .init('hoge2', chartdata2)
    .crossPointer({
          xColor:'cyan',
          xWidth: 5,
          yColor:'rgba(255,255,255,0.5)',
          yWidth: 0.5
    })
</script>