在 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标示的切片，然后调用下列表格的网址: 如果是，我该怎么做？

205273 次浏览
小开
最佳答案

更新: As@Soham Shetty 注释，getSegmentsAtEvent(event)只适用于1. x，应该使用2. x getElementsAtEvent。

. getElementsAtEvent (e)

查找事件点下的元素，然后返回所有元素 这在内部用于“标签”模式 突出显示。

在图表实例上调用 getElementsAtEvent(event)，传递 参数，即 jQuery 事件，将返回 point 元素 处于那个事件的相同位置。

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>
小开

如果使用唐纳特图表，并且希望防止用户在图表圆周周围的空白区域内单击触发事件，则可以使用以下替代方法:

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 ... */
}
};
小开

使用 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 */
}
}

希望能有帮助。

小开

如果你正在使用 TypeScript，那么这段代码有点时髦，因为它没有类型推断，但是它可以得到提供给图表的数据的索引: //事件 Public chartClick (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);
}






}
小开

Chart.js 2.0使得这个过程更加简单。

您可以在文档中的常见图表配置下找到它。

options:{
onClick: graphClickEvent
}


function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}

它会在整个图表上触发，但是如果你点击一个饼图，那么这个饼图的模型包括可以用来获取值的索引。

小开

工作良好的图表 Js 扇区点击

图表: 饼图-添加选项“ onclick”

              options: {
legend: {
display: false
},
'onClick' : function (evt, item) {
console.log ('legend onClick', evt);
console.log('legd item', item);
}
}
小开

为了成功地跟踪单击事件和用户单击的图元素，我在。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>
小开

几天来我一直面临着同样的问题，今天我找到了解决办法。我已经显示了准备执行的完整文件。

<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 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;


});
小开

在选项中放置您的 onclick 并调用您需要的函数作为一个例子，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]);




}
}
小开

您可以在选项部分添加一个 onClick 函数，如下所示:

options : {
cutoutPercentage: 50, //for donuts pie
onClick: function(event, chartElements){
if(chartElements){
console.log(chartElements[0].label);
}
},
},

chartElements[0]是你的图表的点击部分，不需要再使用 getElementsAtEvent了。 它适用于 Chart v2.9.4

小开

我对这个问题有一个很好的解决办法。如果您有多个数据集，那么识别哪个数据集被单击就变得棘手了。_ datetIndex 始终返回零。 但是这应该可以解决这个问题，它将为您提供标签和数据集标签。 请注意: * * this. getElementAtEvent * * 在 getElement 中没有 s

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);
}
    

}
}

提交答案