Нажмите события на диаграммах Pie в 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 и вызвать URL-адрес следующего вида: example.com?label=red&value=300? Если да, как мне это сделать?

Ответ 1

Обновление: Как комментирует @Soham Shetty, getSegmentsAtEvent(event) работает только для 1.x и 2.x getElementsAtEvent.

.getElementsAtEvent(е)

Ищет элемент под точкой события, затем возвращает все элементы при одном и том же индексе данных. Это используется внутренне для режима "метки" подсветка.

Вызов 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>

Ответ 2

Используя версию Chart.JS 2.1.3, ответы старше этого недействительны. Использование метода getSegmentsAtEvent (event) выведет на консоль это сообщение:

getSegmentsAtEvent не является функцией

Поэтому я думаю, что его нужно удалить. Я не читал никаких изменений, если честно. Чтобы разрешить это, просто используйте метод getElementsAtEvent(event), поскольку его можно найти в Документах.

Ниже можно найти script, чтобы получить метку и значение метки с щелчком по щелчку. Обратите внимание, что также получение метки и значения несколько отличается.

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 label and value */
   }
}

Надеюсь, что это поможет.

Ответ 3

Chart.js 2.0 сделал это еще проще.

Вы можете найти его под общей конфигурацией диаграммы в документации. Должен работать на более круговых диаграммах.

options:{
    onClick: graphClickEvent
}

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

Он запускается на всей диаграмме, но если вы нажмете на пирог модель этого пирога, включая индекс, который можно использовать для получения значения.

Ответ 4

Если вы используете диаграмму 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 ... */
    }
};

Ответ 5

Если вы используете TypeScript, код немного напуган, потому что нет вывода типа, но это работает, чтобы получить индекс данных, которые были отправлены на диаграмму: // Мероприятия 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);
    }



}

Ответ 6

Работает мелкий сектор диаграммы onclick

ChartJS: круговая диаграмма - добавление опций "onclick"

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