我正在尝试使用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, {&nbsp; type: 'bar',&nbsp; data: {&nbsp; &nbsp; labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; data: [1, 2, 3, 4, 5],&nbsp; &nbsp; &nbsp; backgroundColor: [&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(255, 0, 0, 0.4)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(255, 216, 0, 0.4)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(0, 255, 0, 0.4)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(0, 0, 255, 0.4)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(160, 160, 160, 0.4)'&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; borderColor: [&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(255, 0, 0, 1)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(255, 216, 0, 1)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(0, 255, 0, 1)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(0, 0, 255, 1)',&nbsp; &nbsp; &nbsp; &nbsp; 'rgba(160, 160, 160, 1)'&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; onClick: function(c, i) {&nbsp; &nbsp; &nbsp; element = i[0];&nbsp; // the chart element you clicked on&nbsp; &nbsp; &nbsp; var xValue = this.data.labels[element._index];&nbsp; // the x-value of the bar&nbsp; &nbsp; &nbsp; var yValue = this.data.datasets[0].data[element._index];&nbsp; // the y-value of the bar&nbsp; &nbsp; &nbsp; console.log(xValue);&nbsp; &nbsp; &nbsp; console.log(yValue);&nbsp; &nbsp; &nbsp; // then, here, you could send a GET/POST request to your PHP function&nbsp; &nbsp; },&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; fontSize: 24,&nbsp; &nbsp; &nbsp; text: dept + ' Dept Risk Summary',&nbsp; &nbsp; &nbsp; fontColor: '#000000'&nbsp; &nbsp; },&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; display: false,&nbsp; &nbsp; },&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; gridLines: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: '#000000'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontColor: "black",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 16&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; gridLines: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: '#000000'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontColor: "black",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 16,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stepSize: 1&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; }&nbsp; }});<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script><canvas id="briskChart"></canvas>