ChartJS onclickの塗りつぶし領域（レーダーチャート）

Question

クリックしたポイントを増減する関数をJQueryで作成しようとしています。私はポイントを増やすが、それを減らす方法を理解することはできませんonclickイベントを作成するために管理してきました。

$("#radarChart").click(
    function (evt) { 
     var activePoints = myRadarChart.getPointsAtEvent(evt); 
     var Values = activePoints[0].label + ' = ' + activePoints[0].value; 
     activePoints[0].value++; 
    } 
); 

上記機能は、Iが充填された領域がクリックされたかどうかを知る必要があり、それを低減するために、クリックされたポイントの値を増加させます。

私はChartJSのドキュメントを見て、それを見逃しませんでした。その他のチャートには、ポーラーエリアチャートなどがあります。セクションをホバリングするとハイライト表示されます。つまり、セグメント上でマウスがホバリングしたことを検出する機能があります。

レーダーチャートにも同様の機能がありますか？

私のcodepen。

もしそうでなければ、私はこれをどのように達成することができたかについてのアイデアを感謝します。

私が考えることのできる唯一の選択肢は、10個のボタン、5個のラベルを作成することです。ボタンは+と - で、ラベルを増減します。これは私の意見ではあまりにも多くのスペースを必要とするので、私はそれを避けようとしています。

おかげで、

Answer 1

本当にそこが欠けているものを行うには、特定のchart.js APIはありませんが、あなたはキャンバスのAPIと少しのジオメトリを使用して同じ結果を得ることができます。

基本的には、ユーザーが現在の値の領域外をクリックした場合に値を大きくし、ユーザーが現在の値の領域内をクリックした場合に値を小さくする必要があります。

これを行うためにクリックハンドラーを変更しました。

function getElementPosition(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
    do { 
     curleft += obj.offsetLeft; 
     curtop += obj.offsetTop; 
    } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
}; 

function getEventLocation(element,event){ 
    // Relies on the getElementPosition function. 
    var pos = getElementPosition(element); 

    return { 
    x: (event.pageX - pos.x), 
    y: (event.pageY - pos.y) 
    }; 
}; 

function pointDistance(point1, point2) { 
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)); 
}; 

//Get the context of the Radar Chart canvas element we want to select 
var ctx = document.getElementById("radarChart").getContext("2d"); 

// Create the Radar Chart 
var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions); 

$("#radarChart").click(function (evt) { 
    var eventLocation = getEventLocation(this,evt); 
    var activePoints = myRadarChart.getPointsAtEvent(evt); 
    var eventLocDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, eventLocation); 
    var activePointDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, activePoints[0]); 

    if (eventLocDistToCenter < activePointDistToCenter) { 
    activePoints[0].value--; 
    } else { 
    activePoints[0].value++; 
    } 

    myRadarChart.update(); 
}); 

注チャートをすぐに変更をレンダリングするように、私はまた.update()への呼び出しを追加しました。あなたがそれを実装したやり方では、次のレンダリングまで（つまりマウスが動くまで）チャートの変化は見られません。

ここには、codepenが実際の解決策からフォークされています。それをチェックするには、周りをクリックしてください。

最後に、chart.js 2.0（最新リリースは2.5）へのアップグレードについて考えるとよいでしょう。 1.0はサポートされておらず、最新のバージョンには多くの改善点があります。これを簡単に移植することができます。助けが必要な場合は、新しい質問を投稿してください。