Chart.js v2 canvas外のカスタムボタンをクリックしてツールチップポップアップをナビゲートする方法は？

Question

Chart.js v2ライブラリのモバイルユーザビリティに関するディスカッション

RadarChartの「スコアポイント」でクリックイベントをシミュレートできますか？ デスクトップビューとタブレットビューは、返されたインデックスによる外部のインタラクティビティをトリガするためにChart内のポイントをクリックすることで、「スコアポイント」のナビゲーションでは大丈夫です。

一般的な例を見つけることができる）が

$('#ChartV2').click(function(e) { 
      var activePoints = myRadarChart.getElementsAtEvent(e);     
      var firstPoint = activePoints[0]; 
      console.log(firstPoint); 
      if (firstPoint !== undefined){ 
       alert(firstPoint._index); 
       //so then we can use 
       // index to hide show results in the html elements out of canvas , etc 
      } 

}です。

しかし、あなたがモバイルビューに見れば、応答性の下 ：trueの場合、チャートは、このようにレーダーチャート内部のポイントは、モバイルクリックのために非常に小さくすることができ、自動サイズ変更、 によってはるかに小さくなり、ラベルと同じ
、すべては意志小さくするとクリックするのが難しくなります。

ユーザがそれらの「スコアポイント」 （最初は手動でキャンバス上でクリックによってトリガ）

は、それが間接的に「次」のナビゲーションボタン 、 外部の「PREV」によってトリガすることができるナビゲートできるようにするカスタマイズ可能でしたスライダー/カルーセルナビゲーションボタンのようなRadarchart の左右にありますか？

Answer 1

あなたが唯一の小さな画面でこの機能が必要な場合は、すぐ上に画面サイズのチェックを追加

var myRadarChart = new Chart(ctx, { 
    ... 

(function (chart) { 
    var helpers = Chart.helpers; 

    var currentDatasetIndex; 
    var currentPointIndex; 

    $('#ChartV2').click(function (e) { 
     // try getting an element close to the click 
     var activePoints = chart.getElementAtEvent(e); 
     var firstPoint = activePoints[0]; 

     if (firstPoint === undefined) { 
      // otherwise pick the first visible element 
      helpers.each(chart.data.datasets, function (dataset, datasetIndex) { 
       if (firstPoint === undefined && this.isDatasetVisible(datasetIndex)) { 
        var meta = this.getDatasetMeta(datasetIndex); 
        firstPoint = meta.data[0]; 
       } 
      }, chart); 
     } 

     // need this check as we may have 0 visible elements 
     if (firstPoint !== undefined) { 
      currentDatasetIndex = firstPoint._datasetIndex; 
      currentPointIndex = firstPoint._index; 
      $('#prev, #next').removeAttr('disabled'); 
      updateView(); 
     } 
    }); 

    $('#prev').click(function() { 
     // we add (n - 1) and do a modulo n to move one step back in an n element array. 
     if (currentPointIndex === 0) 
      currentDatasetIndex = (currentDatasetIndex + chart.data.datasets.length - 1) % chart.data.datasets.length; 
     currentPointIndex = (currentPointIndex + chart.data.labels.length - 1) % chart.data.labels.length; 
     updateView(); 
    }); 

    $('#next').click(function() { 
     currentPointIndex = (currentPointIndex + 1) % chart.data.labels.length; 
     if (currentPointIndex === 0) 
      currentDatasetIndex = (currentDatasetIndex + 1) % chart.data.datasets.length; 
     updateView(); 
    }); 


    // this (hoisted) function will update the text and show the tooltip 
    function updateView() { 
     $('#value').text(
      chart.data.datasets[currentDatasetIndex].label + ' : ' + 
      chart.data.labels[currentPointIndex] + ' : ' + 
      chart.data.datasets[currentDatasetIndex].data[currentPointIndex]); 

     // we mess around with an internal variable here - this may not work with a new version 
     chart.tooltip._active = [ chart.getDatasetMeta(currentDatasetIndex).data[currentPointIndex] ]; 
     chart.tooltip.update(); 
     chart.render(); 
    } 

}(myRadarChart)); 

チャートインスタンスメソッド

---

スクリプト

を利用することによってこれを行うことができますチャートのクリックハンドラを開き、メディアクエリを使用してボタンとラベルを非表示にします。

---

フィドル - http://jsfiddle.net/uxqL6rwf/