Chart.js添加到onhover文本

Question

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

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

＆＃13;

＆＃13;

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
                }
            }]
        }
    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在这张图片中，我希望标签能够提供我自己提供的其他信息。有没有办法做到这一点，并保持在chart.js库的范围内？

Answer 1

您可以使用变量代替"Greennnnnn"。只需动态创建labels数组，然后将该数组传递给。