Test axisYs axisXs

垂直線列位置配列axisYsと水平線行位置配列axisXs

      //位置記録用readonly psition leftとtopを返す axisYsはyTitleでその列のタイトルも返す
      this.axisYs = [];
      //例 [{left: 70, yTitle: "年月"},{left: 206.66666666666666,yTitle: 2014},{left: 343.3333333333333,yTitle: 2015},...]
      this.axisXs = [];
      //例 [{top: 360}, {top: 333},{top: 306}]

チャート領域をクリックしてみてください




<canvas id="hoge"></canvas>
<pre id="info"></pre>
<script>
var chartdata81 = {

  "config": {
    "title": "axisYsとaxisXsのテスト",
    "subTitle": "チャートグリッド内をクリックしてaxisYs情報を取得",
    "type": "line",
    "lineWidth": 1,
    "maxY": 100,
    "minY": 0,
    "useVal": "yes",
    "useMarker": "arc",
    "maxWsColLen": 18,
    "colorSet": ["#DDA0DD","#3CB000"]
  },

  "data": [
    ["年月", 2014, 2015, 2016],
    ["データ1",30,45,56],
    ["データ2",20,23,12]
  ]
};


  ccchart
    .init('hoge', chartdata81)

  //hogeをクリックしたときのイベントを設定する
  hoge.addEventListener('click',function(e){
  
    //クリックした場所の垂直線列位置が何列目かなどの情報配列
    var col = ccchart.util.getAxisIndex('axisYs', e.offsetX);
    
    //クリックした場所の水平線行位置が何行目かなどの情報配列
    var row = ccchart.util.getAxisIndex('axisXs', e.offsetY);
    
    if(!(col === undefined || row === undefined)){
      info.innerHTML = ''
        + '垂直列 ' +col[0] +' 本目'+ '\n'
        + '水平行 ' +row[0] +' 本目'+ '\n'
        + 'Yタイトルは '+ ccchart.axisYs[col[0]].yTitle+ '\n'
        + ccchart.wkdata[1][0] + 'は、' + ccchart.wkdata[1][col[0]]+ '\n'
        + ccchart.wkdata[2][0] + 'は、' + ccchart.wkdata[2][col[0]]
    }
  });

</script>