Ravi Sargam Ответов: 1

Показать значение во всплывающем окне на срезе диаграммы пончика нажмите кнопку chart.js


Я показываю диаграмму пончика с помощью Chart.js, на слайсе нажмите я хочу значение во всплывающем окне.


Это мой HTML код
<canvas id="chart-area" height="200" width="300"></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 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>



Заранее спасибо....

Что я уже пробовал:

Я дал код который пытался пожалуйста проверьте код

Richard Deeming

А в чем проблема с кодом, который вы пробовали?

Ravi Sargam

он работает нормально, но как показать предупреждение/всплывающее окно при щелчке среза чата...

1 Ответов

Рейтинг:
0

sachin.vishwa90

привет, парень, надеюсь, ты имеешь в виду этот библиотека jQuery.
эта библиотека говорит, что вы можете настроить событие click на legand. перейдите по ссылке и найдите "легенда.на кнопке" сайта. это даст вам событие и legandItem.
Теперь вы должны написать логику, чтобы идентифицировать свой leganditem и продолжить.

таким образом, модифицированный код будет выглядеть примерно так

legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: ''
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
            onClick:function(event,item){
                    your logic to show value in popup;
                    }


второе решение можно найти здесь
javascript-нажмите события на круговых диаграммах в Chart.js -переполнение стека[^]


Ravi Sargam

спасибо за ответ, я получил событие click, но мне нужно значение clicked slice... пожалуйста, скажите, как я могу этого достичь...

Ravi Sargam

В легенде нажмите кнопку нормально работать с этим кодом

onClick: функция (e, legendItem) {
индекс ВАР = элемента legenditem.индекс;
оповещения(myDoughnutChart.данных.этикетки[[индекс]]+" "+myDoughnutChart.данных.наборы данных[0].данных[[индекс]]);
}

но как я могу получить ценность, если нажму на кнопку Фрагмент Диаграммы .....

sachin.vishwa90

для получения значения кажется, что вы должны создать собственный шаблон legand с помощью
"легенда.функция labels.generateLabels". Эта функция вернет html-метку. в этом HTML-файле вы можете иметь свой пользовательский атрибут с желаемым значением.
После этого по клику function- & gt; legantItem вы можете прочитать значение пользовательского атрибута.
Вот что я могу предложить. Дайте ему попробовать