Fatal编程技术网
  • javascript/
  • Javascript 单击Chart.js中饼图上的事件

Javascript 单击Chart.js中饼图上的事件

javascript jquery charts chart.js

Javascript 单击Chart.js中饼图上的事件,javascript,jquery,charts,chart.js,Javascript,Jquery,Charts,Chart.js,我有一个关于Chart.js的问题 我使用提供的文档绘制了多个图表。我想知道，如果单击其中一个图表的某个部分，是否可以根据该部分的值进行ajax调用 例如，如果这是我的数据 var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "

我有一个关于Chart.js的问题

我使用提供的文档绘制了多个图表。我想知道，如果单击其中一个图表的某个部分，是否可以根据该部分的值进行ajax调用

例如，如果这是我的
数据

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"
    }
],
我是否可以单击标有标签的
红色
切片并调用以下形式的url：

example.com？label=red&value=300
？如果是，我该怎么做？
更新：作为@Soham Shetty注释，
getSegmentsAtEvent（event）
仅适用于1.x，应使用2.x

.getElementsAtEvent（e）

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

在图表实例上调用
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.
};


例如：



原始答案（适用于Chart.js 1.x版本）：

您可以使用
getSegmentsAtEvent（事件）

在图表实例上调用
getSegmentsAtEvent（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.
};


发件人：

因此，您可以：


$("#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>




风险值数据=[
{
价值：300，
颜色：#F7464A“，
亮点：“FF5A5E”，
标签：“红色”
},
{
价值：50，
颜色：“46BFBD”，
亮点：“5AD3D1”，
标签：“绿色”
},
{
数值：100，
颜色：“FDB45C”，
亮点：“FFC870”，
标签：“黄色”
}
];
$（文件）。就绪（
函数（）{
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myNewChart=新图表（ctx）.Pie（数据）；
$（“#我的图表”）。点击（
功能（evt）{
var activePoints=myNewChart.getSegmentsAtEvent（evt）；
变量url=”http://example.com/?label=“+activePoints[0]。label+”&value=“+activePoints[0]。value；
警报（url）；
}
);                  
}
);

如果使用Donught图表，并且您希望防止用户在图表圆圈周围的空白区域内单击时触发事件，您可以使用以下替代方法：


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（事件）方法将在控制台上输出以下消息：

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，代码有点古怪，因为没有类型推断，但这可以用来获取提供给图表的数据索引：
//事件
公共目录（e:任何）：无效{
//控制台日志（e）


Chart.js 2.0让这变得更加容易

您可以在文档中的“常用图表配置”下找到它。应该可以处理更多的饼图


options:{
    onClick: graphClickEvent
}

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



它会在整个图表上触发，但如果您单击饼图，则该饼图的模型包括可用于获取值的索引。
Working fine chartJs sector onclick

ChartJS：饼图-添加选项“onclick”


为了成功跟踪单击事件以及用户单击的图形元素，我在.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（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
onClick：函数（e）{
var activePoints=myChart.getElementsAtEvent（e）；
var selectedIndex=activePoints[0]。\u索引；
警报（this.data.datasets[0].data[selectedIndex]）；
}
}
});

在选项中，单击并调用所需的函数作为示例，即所需的ajax，我将留下示例，以便每次单击一个点都会告诉您该值，您可以在

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

                      });



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


} 
    }



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



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