0

我有一个使用 chart.js 的 html 图表。我希望用户能够点击条形图中的特定条形，将他们带到一个 url 或同一网站上的另一个页面。根据文档，我没有看到该选项，但我可以使用“点击”甚至触发 javascript，然后将您带到特定的 url 或另一个页面，还是有其他方法可以做到这一点？

4

1 回答 1

1

它可以通过onClick事件处理程序来完成，该处理程序确实记录得很差。

const labels = ["January", "February", "March", "April", "May", "June", "July"];
const data = [65, 59, 80, 81, 56, 55, 40];
const chart = new Chart(document.getElementById('myChart').getContext('2d'), {
    type: "bar",
    data: {
        labels: labels,
        datasets: [{
            label: "My First Dataset",
            data: data,
            fill: false,
            backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
            borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
            borderWidth: 1
        }]
    },
    options: {
       onClick: event => {
          const idx = chart.getElementAtEvent(event)[0]._index;
          const url = "https://www.acme.com/details?month=" + labels[idx] + "&value=" + data[idx];
          window.open(url, "_blank");
       }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

请注意，通过上述代码片段打开新窗口被阻止，因为请求是在未设置“允许弹出窗口”权限的沙盒框架中发出的。

于 2020-02-04T06:08:18.637 回答