Chart.js: легенда круговой диаграммы «onclick» перезаписывается «options.onclick», если присутствуют оба - PullRequest
Новая
       9

Chart.js: легенда круговой диаграммы «onclick» перезаписывается «options.onclick», если присутствуют оба

0 голосов
/ 18 сентября 2018

У меня есть круговая диаграмма, которая должна вызывать одну функцию при нажатии на сегмент диаграммы и другую функцию, если щелкнуть метку в легенде. Я надеялся добиться такого поведения с помощью следующего: 

options: {
            responsive: true,
            legend: {
                position: 'right',
                onClick: function (event, elem) {
                    graph_legend_click(elem.text);
                },
            },
            onClick: function (event) {
                graph_click( event);
            }
        }

Однако на практике выполняется только второй щелчок (который вызывает graph_click( event);). легенда onClick не работает. Что я могу сделать, чтобы второй onClick не перезаписывал первый?

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Кажется, что нажатие на легенду заблокировано скрытым iframe, который chartjs создает для обнаружения событий изменения размера.Вы можете установить экземпляр chartjs как неотвечающий, если для вас не важно, что диаграмма автоматически изменяет размеры. 

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    responsive: false,
    onClick: function(event) {
      alert("onClickGraph");
    },
    legend: {
      onClick: function(event) {
        alert("onClickLegend");
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
  background-color: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Вы также можете сделать родительский контейнер относительно позиционированным, что также позволит экземпляру chartjs быть отзывчивым, даже если установлен флаг «отзывчивый»в false, и поэтому iframe не отображается: http://www.chartjs.org/docs/latest/general/responsive.html#important-note

0 голосов
/ 21 сентября 2018

можно отличить событие клика только по их координатам ... где условия:

  • event.clientY >= chart.boxes[0].height, когда legend включено top.

  • event.clientX <= chart.boxes[0].left, когда legend соответствует right.

, аналогичные условия также могут использоваться, когда legend к left или bottom. 

var chart;
var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100)
            ],
            backgroundColor: [
                "rgb(255, 99, 132)",
                "rgb(255, 159, 64)",
                "rgb(255, 205, 86)",
                "rgb(75, 192, 192)",
                "rgb(54, 162, 235)"
            ],
            label: 'Dataset 1'
        }],
        labels: [
            'Red',
            'Orange',
            'Yellow',
            'Green',
            'Blue'
        ]
    },
    options: {
        responsive: true,
        onClick: function (event) {
            
            /* checking where the click actually happens */
            var box = chart.boxes[0];
            if((box.position === "top" && event.clientY >= box.height) || (box.position === "right" && event.clientX <= box.left)) {
                console.log("chart click  @ x: " + event.clientX + ", y:" + event.clientY);
            }
        },
        legend: {
            position: 'top',
            onClick: function (event, elem) {
                console.log("legend click @ x: " + event.clientX + ", y:" + event.clientY);
            }
        }
    }
};

$(function() {
  chart = new Chart($('#chart-area')[0].getContext('2d'), config);
});
html, body {height: 100%; width: 100%; margin: 0;}
canvas#chart-area {height: 100px; width: 100px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="canvas-holder"><canvas id="chart-area"></canvas></div>
...