如何使onclick / hover在ChartJS中显示关联的值

Question

我有一个（定期更新的）ChartJS折线图，如下，处理从Django API收集的三种类型的数据-prices，dates和关联的more_info：

<script>
    var myChart
    function refresh_graph() {
        {% block jquery %}
        var chart_endpoint = "{% url 'chart_data' current_id %}"
        var defaultData = []
        var labels = []
        var more_info = []
        $.ajax({
            method: "GET",
            url: chart_endpoint,
            success: function(data){
                defaultData = data.prices
                labels = data.dates
                more_info = data.more_info
                if(myChart){
                    myChart.destroy();
                }
                var ctx = document.getElementById('myChart').getContext('2d');
                myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets : [{
                            label: 'Price',
                            data: defaultData,
                            backgroundColor: [
                                'rgba(54, 162, 235, 0.2)',
                            ],
                            borderColor: [
                                'rgba(54, 162, 235, 1)',
                            ],
                            borderWidth: 2
                        }]
                    },
                    options: {
                        elements: {
                            line: {
                                tension: 0 // disables bezier curves
                            }
                        },
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    suggestedMin: 0,
                                    suggestedMax: 1
                                }
                            }]
                        },
                        animation: {
                            duration: 0 // general animation time
                        },
                        hover: {
                            animationDuration: 0 // duration of animations when hovering an item
                        },
                        responsiveAnimationDuration: 0 // animation duration after a resize
                    }
                })
            }
        })
        setTimeout(refresh_graph, 5000);
        {% endblock %}
    }
    setTimeout(refresh_graph, 0);
</script>

<div>
    <canvas id="myChart" width="1000" height="400"></canvas>
</div>

我正在尝试找出方法，以便当用户单击或悬停在图表上的一个数据点（即price在date处），他们会看到相关的more_info。

我知道使用this的getElementById，但无法弄清楚如何将其扩展到这样的情况，即我not希望显示标签（这里：date）和数据点值（这里：price），而是第三个值，即more_info。

我也知道使用[[custom tooltips]]的this方法，但是也无法从仅使用tooltipItem.xLabel（date）和tooltipItem.yLabel（price），而不是第三个关联值。

我有一个（定期更新的）ChartJS折线图，如下所示，处理三种类型的数据-价格，日期和相关的more_info-从Django API中收集：

var myChart ...