Chart.js 添加到悬停文本

Question

chart.js 的新手，我在他们的文档中找不到向标签添加更多信息的方法：

到目前为止我得到了什么：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Green", "Blue", "Yellow", "Greennnnnn", "Purple", "Orange", "Black"],
        datasets: [
        {
            label: 'DistanceA',
            data: [12, 16, 3, 5, 2, 8, 4],
            borderColor: ['rgba(86, 244, 66,1)'],
            fill: false,
            borderWidth: 1
        },
        {
            label: 'DistanceB',
            data: [5, 2, 4, 10, 6, 3, 7],
            borderColor: ['rgba(255,99,132,1)'],
            fill: false,
            borderWidth: 1
        }
        ]
    },

    options: {
        events: ['click'],
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    stepSize: 2
                }
            }]
        }
    }
});

<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"> </script>

在这张图片中，我希望标签包含我自己提供的附加信息。有什么方法可以做到这一点并保持在 chart.js 图书馆的范围内吗？

Answer 1

您可以使用变量代替 "Greennnnnn"。只需动态创建标签数组，并将该数组传入即可。

Chart.js 添加到悬停文本

Chart.js add to onhover text

javascript

chart.js

chart.js2