Я пытаюсь добавить событие щелчка, используя javascript, к каждому столбцу диаграммы в диаграмме. js - PullRequest
Новая
       35

Я пытаюсь добавить событие щелчка, используя javascript, к каждому столбцу диаграммы в диаграмме. js

1 голос
/ 04 марта 2020

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

Цель этого заключается в том, чтобы, когда пользователь нажимает на определенную полосу диаграммы, он выполняет php форма отправки, которая переносит их на другую страницу на сайте.

Данные гистограммы заполняются из базы данных SQL через php, когда пользователь переходит на страницу.

Вот пример кода, который у меня есть до сих пор ... 

<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, чтобы перевести пользователя на эту новую страницу.

Если у кого-либо есть опыт работы с диаграммой. js и мог бы указать мне правильное направление, я был бы вечно благодарен.

1 Ответ

1 голос
/ 04 марта 2020

Вы можете создать обработчик click, который извлекает значения x и y из диаграммы. Затем, используя эти данные, вы можете отправить запрос GET или POST в ваш скрипт PHP.

Пример получения значений из гистограммы (ключ здесь - посмотреть на 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>
...