代码之家 › 专栏 › 技术社区 › Notaras

Chart.js:饼图图例“单击” 被覆盖“options.onclick” 如果两者都存在

chartjs-2.6.0 chart.js javascript

Notaras · 技术社区 · 7 年前

我有一个饼图,需要调用一个函数时,你点击了一段图表和另一个不同的功能,如果在图例中的标签被点击。我希望通过以下方式实现这种行为:

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

但是实际上,只有第二个onclick(调用 graph_click( event); )会被处决的。传奇 onClick 不起作用。如何防止第二次onClick覆盖第一次onClick?

2 回复 | 直到 7 年前

Martin Zeitler 7 年前

只能通过坐标来区分单击事件…其中条件是:

event.clientY >= chart.boxes[0].height legend 正在打开 top
event.clientX <= chart.boxes[0].left ,当 传奇 是为了 right .

传奇 是为了 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>

Lukas Bach 7 年前

单击图例似乎被隐藏的iframe阻止,chartjs创建iframe是为了检测调整大小事件。如果图表自动调整大小对您不重要,可以将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实例响应,即使标志“responsive”设置为false,因此不会显示iframe: http://www.chartjs.org/docs/latest/general/responsive.html#important-note

Alireza 5 年前

options: {
            responsive: true,
            legend: {
                position: 'right',
                onClick: function (event, elem) {
                    graph_legend_click(elem.text);
                },
            },
            onClick: function (event, item) {
                if(item.length == 0)
                   return;

                graph_click( event);
            }
        }

这同样有效

var chart = new Chart(ctx, config);

chart.options.legend.onClick = function(ev, legendItem){
     alert(legenItem.text);
}
chart.options.onClick = function(ev, item){
     if (item.length == 0)
        return;
     // TODO
}