javascript - 单击 Chartjs 条形图中的每个条形后如何启动模式以及如何获取其数据？

Question

所以我使用chartjs在javascript中创建图表，我有一个问题，我如何选择条形图中的每个条形图并使用其数据启动一个模式。

我已经在 options 之后尝试了 onClick 事件，但我认为我的模式错误。我对chartjs了解不多，我想我需要帮助。这是我的代码：

  var ctx = document.getElementById("myChart2").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
                labels: outlet,
                datasets: [{
                    label: "Players",
                    data: total_outlet,
                    backgroundColor: [
                        "#f38b4a",
                        "#56d798",
                        "#ff8397",
                        "#6970d5",
                        "#ff0000",
                        "#339966",
                        "#004d00",
                        "#003366",
                        "#e62e00",
                        "#666633",
                        "#996633"
                    ],
                    hoverBackgroundColor: [
                        "#f38b4a",
                        "#56d798",
                        "#ff8397",
                        "#6970d5",
                        "#ff0000",
                        "#339966",
                        "#004d00",
                        "#003366",
                        "#e62e00",
                        "#666633",
                        "#996633"
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                           min: 0,
                           fontColor: "white"
                        },
                        gridLines: {
                            display:false
                        }
                    }],
                    yAxes:[{
                        ticks: {
                        fontColor: "white"
                        },
                        gridLines: {
                            display:false
                        }
                    }]
                },

                title: {
                    display: true,
                    text: 'Top 10 Outlet with Active UGL Terminals',
                    fontColor: "white"
                },
                legend: {
                    display:false,
                    labels: {
                        fontColor: "white"

                    }
                }



            }
                    });

标签： javascriptchart.js

Answer 1

这非常简单，并记录在 Chart.js API 页面。以下是改编自官方示例的工作片段：

let canvas = document.getElementById('canvas');

let myChart = new Chart(canvas, {
  type: 'bar',
  data: {
    labels: ['a', 'b', 'c', 'd'],
    datasets: [{
      data: [0, 2, 4, 8]
    }]
  }
});

canvas.addEventListener('click', function(evt) {
  var firstPoint = myChart.getElementAtEvent(evt)[0];
  if (firstPoint) {
    var label = myChart.data.labels[firstPoint._index];
    var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];

    alert('Label: ' + label + "\nValue: " + value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>