Javascript 如何让onclick/hover在ChartJS中显示关联值

我有一个（定期更新）ChartJS折线图，如下所示，从Django API收集三种类型的数据-

价格

，

日期

，以及相关的

更多信息

：

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

var myChart
函数刷新图（）{
{%block jquery%}
var chart\u endpoint=“{%url'图表\u数据'当前\u id%}”
var defaultData=[]
变量标签=[]
var more_info=[]
$.ajax({
方法：“获取”，
url:chart_端点，
成功：功能（数据）{
defaultData=data.prices
labels=data.dates
更多信息=数据。更多信息
如果（我的图表）{
myChart.destroy（）；
}
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
myChart=新图表（ctx{
键入：“行”，
数据：{
标签：标签，
数据集：[{
标签：“价格”，
数据：默认数据，
背景颜色：[
“rgba（54162235,0.2）”，
],
边框颜色：[
“rgba（54162235,1）”，
],
边框宽度：2
}]
},
选项：{
要素：{
行：{
张力：0//禁用贝塞尔曲线
}
},
图例：{
显示：假
},
比例：{
雅克斯：[{
滴答声：{
建议分钟：0，
建议最大值：1
}
}]
},
动画：{
持续时间：0//一般动画时间
},
悬停：{
animationDuration:0//悬停项目时的动画持续时间
},
responsiveAnimationDuration:0//调整大小后的动画持续时间
}
})
}
})
设置超时（刷新图表，5000）；
{%endblock%}
}
设置超时（刷新图表，0）；

我正试图找出如何使它成为这样，当用户单击或悬停在（我很乐意）图形中的一个数据点（即

日期的
价格
）上时，他们将看到相关的
更多信息

我知道如何使用getElementById，但不知道如何将其扩展到这样的情况，在这种情况下，我不希望显示标签（此处：
date
）和数据点值（此处：
price
），而是显示第三个值，即
more\u info

我也知道使用自定义工具提示的方法，但也不知道如何从简单使用
tooltipItem.xLabel
（
date
）和
tooltipItem.yLabel
（
price
）的情况下扩展它，而不是使用第三个关联值。
这里有一个使用工具提示的解决方案（忽略OP中的Ajax）：

带有自定义工具提示的完整代码笔：。
你能把它放在代码沙盒上吗？谢谢，@Mark。我在这里放了一个代码笔（没有Ajax）：。如果你有任何想法，请告诉我！看起来你已经成功了，不是吗？@Mark-是的，是的，已经成功使用工具提示。仍然需要确定如何格式化工具提示（例如，设置其大小）但基本的解决办法就在那里。
var myChart
function refresh_graph() {
  var labels = ["Monday", "Tuesday", "Wednesday","Thursday","Friday","Saturday","Sunday"]
  var defaultData = [0.1,0.5,0.3,0.4,0.6,0.8,0.3]
  var more_info = ["Monday info", "Tuesday info", "Wednesday info","Thursday info","Friday info","Saturday info","Sunday 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: {
      responsive : true,
      tooltips : {
        callbacks : {
          title : function() {
            return 'More information:';
          },
          afterLabel : function(tooltipItem, data) {
            return 'Information: ' + more_info[tooltipItem.index];
          },
        }
      },
      elements: {
        line: {
          tension: 0
        }
      },
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMin: 0,
            suggestedMax: 1
          }
        }]
      },
      animation: {
        duration: 0
      },
      hover: {
        animationDuration: 0
      },
      responsiveAnimationDuration: 0
    }
  })
  setTimeout(refresh_graph, 50000);
}
setTimeout(refresh_graph, 0);