Chart.jsの円グラフのクリックイベント
Chart.jsに関して質問があります。
提供されているドキュメントを使用して、複数の円グラフを描画しました。グラフの特定のスライスをクリックすると、そのスライスの値に応じてajax呼び出しを行うことができますか？
たとえば、これが私のdataである場合
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
],
Redというラベルの付いたスライスをクリックして、次の形式のURLを呼び出すことは可能ですか？example.com?label=red&value=300？はいの場合、これについてどうすればよいですか？
更新：@Soham Shettyコメントとして、getSegmentsAtEvent(event)は1.xおよび2.xでのみ機能します getElementsAtEvent 使用すべきです。
。getElementsAtEvent（e）
イベントポイントの下の要素を探し、同じデータインデックスのすべての要素を返します。これは「ラベル」モードの強調表示のために内部的に使用されます。
Chartインスタンスで
getElementsAtEvent(event)を呼び出して、イベントまたはjQueryイベントの引数を渡すと、そのイベントの同じ位置にあるポイント要素が返されます。canvas.onclick = function(evt){ var activePoints = myLineChart.getElementsAtEvent(evt); // => activePoints is an array of points on the canvas that are at the same position as the click event. };
例： https://jsfiddle.net/u1szh96g/208/
元の回答（Chart.js 1.xバージョンで有効）：
getSegmentsAtEvent(event)を使用してこれを達成できます
Chartインスタンスで
getSegmentsAtEvent(event)を呼び出して、イベントまたはjQueryイベントの引数を渡すと、そのイベントの同じ位置にあるセグメント要素が返されます。
From： プロトタイプメソッド
だからあなたができる：
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
/* do something */
}
);
完全な動作例を次に示します。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript">
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
$(document).ready(
function () {
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
alert(url);
}
);
}
);
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
Chart.JSバージョン2.1.3を使用すると、これより古い回答は無効になります。 getSegmentsAtEvent（event）メソッドを使用すると、コンソールに次のメッセージが出力されます。
getSegmentsAtEventは関数ではありません
だから私はそれを削除する必要があると思います。正直に言って、変更ログは読みませんでした。これを解決するには、getElementsAtEvent(event)メソッドを使用します。これは ドキュメント上 にあります。
以下に、効果的にクリックされたスライスのラベルと値を取得するスクリプトがあります。ラベルと値の取得もわずかに異なることに注意してください。
var ctx = document.getElementById("chart-area").getContext("2d");
var chart = new Chart(ctx, config);
document.getElementById("chart-area").onclick = function(evt)
{
var activePoints = chart.getElementsAtEvent(evt);
if(activePoints.length > 0)
{
//get the internal index of slice in pie chart
var clickedElementindex = activePoints[0]["_index"];
//get specific label by index
var label = chart.data.labels[clickedElementindex];
//get value by index
var value = chart.data.datasets[0].data[clickedElementindex];
/* other stuff that requires slice's label and value */
}
}
それが役に立てば幸い。
Chart.js 2.0はこれをさらに簡単にしました。
ドキュメントの一般的なチャート構成の下にあります。円グラフ以上で動作するはずです。
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}
チャート全体でトリガーされますが、円をクリックすると、値を取得するために使用できるインデックスを含むその円のモデルが表示されます。
ワーキングファインチャートJsセクターonclick
ChartJS：円グラフ-「onclick」オプションを追加
options: {
legend: {
display: false
},
'onClick' : function (evt, item) {
console.log ('legend onClick', evt);
console.log('legd item', item);
}
}
私は数日以来同じ問題に直面していた、今日私は解決策を見つけました。すぐに実行できる完全なファイルを示しました。
<html>
<head><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
</script>
</head>
<body>
<canvas id="myChart" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
onClick:function(e){
var activePoints = myChart.getElementsAtEvent(e);
var selectedIndex = activePoints[0]._index;
alert(this.data.datasets[0].data[selectedIndex]);
}
}
});
</script>
</body>
</html>
ドーナツチャートを使用し、チャートサークルの周りの空のスペース内でクリックしたときにユーザーがイベントをトリガーしないようにするには、次の代替手段を使用できます。
var myDoughnutChart = new Chart(ctx).Doughnut(data);
document.getElementById("myChart").onclick = function(evt){
var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
/* this is where we check if event has keys which means is not empty space */
if(Object.keys(activePoints).length > 0)
{
var label = activePoints[0]["label"];
var value = activePoints[0]["value"];
var url = "http://example.com/?label=" + label + "&value=" + value
/* process your url ... */
}
};
クリックイベントとユーザーがクリックしたグラフ要素を正常に追跡するために、.jsファイルで次のことを行い、次の変数を設定しました。
vm.chartOptions = {
onClick: function(event, array) {
let element = this.getElementAtEvent(event);
if (element.length > 0) {
var series= element[0]._model.datasetLabel;
var label = element[0]._model.label;
var value = this.data.datasets[element[0]._datasetIndex].data[element[0]._index];
}
}
};
vm.graphSeries = ["Series 1", "Serries 2"];
vm.chartLabels = ["07:00", "08:00", "09:00", "10:00"];
vm.chartData = [ [ 20, 30, 25, 15 ], [ 5, 10, 100, 20 ] ];
次に、私の.htmlファイルで次のようにグラフを設定します。
<canvas id="releaseByHourBar"
class="chart chart-bar"
chart-data="vm.graphData"
chart-labels="vm.graphLabels"
chart-series="vm.graphSeries"
chart-options="vm.chartOptions">
</canvas>
TypeScriptを使用している場合、型推論がないためコードは少しファンキーですが、これはチャートに提供されたデータのインデックスを取得するために機能します：//イベントpublic chartClicked（e：any）：void { //console.log(e）;
try {
console.log('DS ' + e.active['0']._datasetIndex);
console.log('ID ' + e.active['0']._index);
console.log('Label: ' + this.doughnutChartLabels[e.active['0']._index]);
console.log('Value: ' + this.doughnutChartData[e.active['0']._index]);
} catch (error) {
console.log("Error In LoadTopGraph", error);
}
try {
console.log(e[0].active);
} catch (error) {
//console.log("Error In LoadTopGraph", error);
}
}
var ctx = document.getElementById('pie-chart').getContext('2d');
var myPieChart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
});
//define click event
$("#pie-chart").click(
function (evt) {
var activePoints = myPieChart.getElementsAtEvent(evt);
var labeltag = activePoints[0]._view.label;
});