我正在尝试使用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,        },这是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>