在圆形图表切片上弹出显示值，点击chart.js [英] Show value in popup on doughnut chart slice click in chart.js

问题描述

我正在使用Chart.js显示圆环图，在切片上单击我想要PopUp中的值。





这是我的HTML代码

 <   canvas     id   = 图表区域    height   =  200    width   =  300 >  < span class =code-keyword><   / canvas  >  

填写和显示数据的代码

< script src =   assets / js / jquery-1.11.3.js>< / script> 
< script type =   text / javascript src =   assets / js / Chart.js>< / script> 
< script type =   text / javascript> 
 
  var  Accepted =  0 ; 
  var 拒绝=  0 ; 
  var  InProgress =  0 ; 
 
 $（ document ）。ready（ function （）{
 
  var  obj = {}; 
 obj.FinYear = $ .trim（$（   [id * = ddlFinYear]）。val（））; 
 
 $ .ajax（{
 type ：  POST，
 contentType：   application / json; charset = utf-8，
 url：  Dashboard.aspx / GetClaimStatusCnt，
 data： JSON  .stringify（obj），
 async： false ，
  //  数据：{}， 
 dataType：  json，
成功： function （Sdata）{
 Accepted = Sdata.d [ 0 ]接受。 
拒绝= Sdata.d [ 0 ]。拒绝; 
 InProgress = Sdata.d [ 0 ]。InProgress; 
}，
错误： function （结果）{
 alert（ 声明状态错误）; 
} 
}）; 
 
}）; 
 
  var  doughnutData = {
 labels：[
  已接受，
  正在进行中，
  拒绝 
]，
数据集：[{
 data：[
 Accepted， //   randomScalingFactor（）， 
 InProgress， //   randomScalingFactor（） 
拒绝 //   randomScalingFactor（）， 
 
]，
 backgroundColor：[
  window  .chartColors.green，
  window  .chartColors.blue，
  window  .chartColors.orange 
]，
标签：' 数据集1' 
}] 
 
}; 
 
 jQuery（ document ）。ready（ function （）{
  var  ctz =  document  .getElementById（  chart-area）。getContext（  2d ）; 
 
  window  .myDoughnutChart =  new  Chart（ctz ，{
类型：'  donut'，
数据：doughnutData，
选项：{
响应： true ，
元素：{
 arc：{
  //   borderColor：＃333 
} 
}，
  //   cutoutPercentage：50  
  //   onClick：graphClickEvent， 
 legend：{
 position：' 底部'，
}，
标题：{
显示： true ，
 text： ' ' 
}，
 animation：{
 animateScale：< span class =code-keyword> true ，
 animateRotate： true  
} 
 
} ，
 
 
}）; 
 
}）; 
< / script> 

提前致谢....



我尝试了什么：



我已经给出了试过的代码请检查code

解决方案

（ document ）。ready（ function （）{

var obj = {};
obj.FinYear =

.trim（

（ [id * = ddlFinYear] ）VAL（））;

I am showing doughnut chart using Chart.js, on slice click i want value in PopUp.


This is my HTML Code

<canvas id="chart-area" height="200" width="300"></canvas>

Code to fill and show data

<script src="assets/js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="assets/js/Chart.js"></script>
    <script type="text/javascript">

         var Accepted = 0;
         var Denied = 0;
         var InProgress = 0;

     $(document).ready(function () {   
     
      var obj = {};
            obj.FinYear = $.trim($("[id*=ddlFinYear]").val());
              
                  $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Dashboard.aspx/GetClaimStatusCnt",
                     data: JSON.stringify(obj),
                     async: false,
                    // data: "{}",
                    dataType: "json",
                    success: function (Sdata) {                      
                        Accepted = Sdata.d[0].Accepted;
                        Denied = Sdata.d[0].Denied;
                        InProgress = Sdata.d[0].InProgress; 
                         },
                    error: function (result) {
                        alert("Claim Status Error");                                          
                    }
                });

                });

 var doughnutData = {
    labels: [
        "Accepted",
        "In Progress",
        "Denied"       
    ],
    datasets: [{
                data: [
                 Accepted,// randomScalingFactor(),
                  InProgress,//randomScalingFactor()  
                 Denied//randomScalingFactor(),
                                  
                ],
                backgroundColor: [
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.orange                    
                ],
                label: 'Dataset 1'
            }]
            
};
 
jQuery(document).ready(function() {
var ctz = document.getElementById("chart-area").getContext("2d");
 
    window.myDoughnutChart = new Chart(ctz, {
        type: 'doughnut',
        data: doughnutData,
        options: {
            responsive: true,
            elements: {
                arc: {
                   // borderColor: "#333"
                }
            },
            //cutoutPercentage: 50
			//onClick:graphClickEvent,
			legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: ''
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
			
        },
      
		
    });
    
});
    </script>

Thanks in advance....

What I have tried:

I had given code which tried please check the code

解决方案

(document).ready(function () { var obj = {}; obj.FinYear =

.trim(

("[id*=ddlFinYear]").val());

这篇关于在圆形图表切片上弹出显示值，点击chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！