我正在尝试使用 javascript 向 Chart.js 中的条形图的每一列添加点击事件

Question

我一直在尝试使用 Chart.js 向条形图中的每一列添加点击事件。我想弄清楚的是如何让每列上的点击事件执行我想要的代码。

这样做的目的是当用户点击图表的特定栏时，它会执行 php 表单提交，将他们带到网站上的另一个页面。

当用户转到页面时，通过 php 从 SQL 数据库填充条形图数据。

这是我目前拥有的代码示例...

<canvas id="briskChart" style="margin:auto;display:block;background-color:white;border-style:solid;border-width:1px;padding:10px;"></canvas>

<script>
var red = <?=json_encode($count1[0]);?>;
var yellow = <?=json_encode($count2[0]);?>;
var green = <?=json_encode($count3[0]);?>;
var blue = <?=json_encode($count4[0]);?>;
var grey = <?=json_encode($count5[0]);?>;

var dept = <?=json_encode($row['dept']);?>;


var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
        datasets: [{
            data: [red, yellow, green, blue, grey],
            backgroundColor: [
                'rgba(255, 0, 0, 0.4)',
                'rgba(255, 216, 0, 0.4)',
                'rgba(0, 255, 0, 0.4)',
                'rgba(0, 0, 255, 0.4)',
                'rgba(160, 160, 160, 0.4)'
            ],
            borderColor: [
                'rgba(255, 0, 0, 1)',
                'rgba(255, 216, 0, 1)',
                'rgba(0, 255, 0, 1)',
                'rgba(0, 0, 255, 1)',
                'rgba(160, 160, 160, 1)'

            ],
            borderWidth: 1
        }]

    },
    options: {
    onClick: event => {
        document.bred.submit();
        },
        title: {
            display: true,
            fontSize: 24,
            text: dept + ' Dept Risk Summary',
            fontColor: '#000000'
        },
        legend: {
            display: false,
        },
        scales: {
                xAxes: [{
                        display: true,
                        gridLines: {color: '#000000'},
                        ticks: {
                            fontColor: "black",
                            fontSize: 16
                            }
                        }],
                yAxes: [{
                        display: true,
                        gridLines: {color: '#000000'},
                        ticks: {
                            beginAtZero: true,
                            fontColor: "black",
                            fontSize: 16,
                            stepSize: 1
                            }
                        }],
        }
    }
});

</script>

这里是 html:

<form action='../php/bred.php' method='POST' name='bred'>
</form>

Chart.js 的文档在点击事件方面非常有限。对于每个数据系列，当单击该列时，我想运行相应的 document.[form name].submit 将用户带到那个新页面。

如果有人有任何使用 Chart.js 执行此操作的经验并能为我指出正确的方向，我将永远感激不已。

Answer 1

您可以创建一个 click 处理程序来从图表中检索 x 和 y 值。然后，使用该数据，您可以向 PHP 脚本发送 GET 或 POST 请求。

条形图取值示例（这里重点看onClick函数）：

var red, yellow, green, blue, grey, dept = "";

var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
    datasets: [{
      data: [1, 2, 3, 4, 5],
      backgroundColor: [
        'rgba(255, 0, 0, 0.4)',
        'rgba(255, 216, 0, 0.4)',
        'rgba(0, 255, 0, 0.4)',
        'rgba(0, 0, 255, 0.4)',
        'rgba(160, 160, 160, 0.4)'
      ],
      borderColor: [
        'rgba(255, 0, 0, 1)',
        'rgba(255, 216, 0, 1)',
        'rgba(0, 255, 0, 1)',
        'rgba(0, 0, 255, 1)',
        'rgba(160, 160, 160, 1)'

      ],
      borderWidth: 1
    }]

  },
  options: {
    onClick: function(c, i) {
      element = i[0];  // the chart element you clicked on
      var xValue = this.data.labels[element._index];  // the x-value of the bar
      var yValue = this.data.datasets[0].data[element._index];  // the y-value of the bar
      console.log(xValue);
      console.log(yValue);
      // then, here, you could send a GET/POST request to your PHP function
    },
    title: {
      display: true,
      fontSize: 24,
      text: dept + ' Dept Risk Summary',
      fontColor: '#000000'
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        display: true,
        gridLines: {
          color: '#000000'
        },
        ticks: {
          fontColor: "black",
          fontSize: 16
        }
      }],
      yAxes: [{
        display: true,
        gridLines: {
          color: '#000000'
        },
        ticks: {
          beginAtZero: true,
          fontColor: "black",
          fontSize: 16,
          stepSize: 1
        }
      }],
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="briskChart">
</canvas>

我正在尝试使用 javascript 向 Chart.js 中的条形图的每一列添加点击事件

I'm trying to add a click event, using javascript, to each column of a barchart in Chart.js

javascript

php

html

forms

chartjs-2.6.0