Chart.js의 파이 차트에서 이벤트를 클릭
Chart.js와 관련해서 질문이 있습니다.
제공된 설명서를 이용해 여러 개의 파이차트를 그려봤습니다.차트 중 하나의 특정 슬라이스를 클릭하면 해당 슬라이스의 값에 따라 아약스 콜을 할 수 있는지 궁금합니다.
예를 들어, 이것이 나의 것이라면.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"
}
],
제가 클릭할 수 있을까요?Redslice에 라벨을 붙이고 다음 형태의 url을 호출합니다.example.com?label=red&value=300만약 합니까 만약 그렇다면 어떻게 해야 합니까?
업데이트: @Soham Shetty가 언급한 바와 같이,getSegmentsAtEvent(event)1.x와 2.x에 대해서만 작동합니다.
.getElementsAtEvent(e)
이벤트 점 아래에서 요소를 찾은 다음 동일한 데이터 인덱스에 있는 모든 요소를 반환합니다.이는 내부적으로 'label' 모드 강조 표시에 사용됩니다.
부르기
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)
부르기
getSegmentsAtEvent(event)차트 인스턴스에서 이벤트의 인수 또는 jQuery 이벤트를 통과하면 해당 이벤트의 동일한 위치에 있는 세그먼트 요소가 반환됩니다.
출처: 프로토타입 메소드
따라서 다음을 수행할 수 있습니다.
$("#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>
차트 사용 중.JS 버전 2.1.3, 이것보다 오래된 답변은 더 이상 유효하지 않습니다.getSegmentsAtEvent(이벤트) 메서드를 사용하면 콘솔에 다음 메시지가 출력됩니다.
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 섹터 작업 중
ChartJS : 파이 차트 - 옵션 추가 "on click"
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 ... */
}
};
TypeScript를 사용하는 경우 유형 추론이 없기 때문에 코드가 약간 펑키하지만 차트에 제공된 데이터의 인덱스를 가져오는 데 사용됩니다. // events 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);
}
}
클릭 이벤트와 사용자가 클릭한 그래프 요소를 성공적으로 추적하기 위해 .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>
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;
});
버전 4.x의 경우 승인된 답변이 더 이상 작동하지 않음을 유의하시기 바랍니다.문서에서 설명하는 대신 getElementsAtEventForMode를 사용해야 합니다.
function clickHandler(evt) {
const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
const label = myChart.data.labels[firstPoint.index];
const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
}
}
다음과 같이 onClick 기능을 옵션 섹션에 추가할 수 있습니다.
options : {
cutoutPercentage: 50, //for donuts pie
onClick: function(event, chartElements){
if(chartElements){
console.log(chartElements[0].label);
}
},
},
그chartElements[0]는 차트에서 클릭된 섹션이므로 사용할 필요가 없습니다.getElementsAtEvent더이상.차트 v2.9.4에서 작동합니다.
저는 이 문제에 대해 훌륭한 해결책을 가지고 있습니다.데이터셋이 여러 개인 경우 클릭한 데이터셋을 식별하는 것이 까다로워집니다._데이터 집합인덱스는 항상 0을 반환합니다.하지만 이 방법이 효과가 있을 겁니다.라벨과 데이터셋 라벨도 제공합니다.**이(가) .getElementAtEvent**는 singetElement가 없습니다.
options: {
onClick: function (e, items) {
var firstPoint = this.getElementAtEvent(e)[0];
if (firstPoint) {
var label = firstPoint._model.label;
var val = firstPoint._model.datasetLabel;
console.log(label+" - "+val);
}
}
}
옵션 내에서 온클릭을 사용하고 필요한 기능을 예로 들어 필요한 Ajax를 호출합니다. 예는 한 점을 클릭할 때마다 값을 알려주고 새로운 기능에서 사용할 수 있도록 남겨 두겠습니다.
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: 'white',
//backgroundColor:'#ffce00',
align: 'start'
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: "white"
},gridLines: {
color: 'rgba(255,255,255,0.1)',
display: true
}
}],
xAxes: [{
ticks: {
fontColor: "white"
},gridLines: {
display: false
}
}]
},
legend: {
display: false
},
//onClick: abre
onClick:function(e){
var activePoints = myChart.getElementsAtEvent(e);
var selectedIndex = activePoints[0]._index;
alert(this.data.datasets[0].data[selectedIndex]);
}
}
언급URL : https://stackoverflow.com/questions/26257268/click-events-on-pie-charts-in-chart-js
'programing' 카테고리의 다른 글
| iOS 오류 "임베디드 바이너리가 상위 앱과 동일한 인증서로 서명되지 않았습니다." (0) | 2023.10.28 |
|---|---|
| C의 함수 인수로 포인터 (0) | 2023.10.28 |
| 글꼴(@font-face)이 이미 로드되었는지 어떻게 알 수 있습니까? (0) | 2023.10.28 |
| 양식 유효성 검사 - 전자 메일 유효성 검사가 AngularJs에서 예상대로 작동하지 않습니다. (0) | 2023.10.28 |
| 내 SQL 저장 지속 시간 - 데이터 유형? (0) | 2023.10.28 |