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

Question

我有一个（定期更新的）ChartJS 折线图，如下所示，处理三种类型的数据 - prices、dates 和相关的 more_info - 从 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>

我正在尝试弄清楚如何做到这一点，当用户点击或悬停在图表中的一个数据点（我对其中任何一个都很满意）时（即 price 在 date)，他们会看到关联的 more_info.

我知道使用 getElementById，但无法弄清楚如何将其扩展到我这样的情况'm 不是寻找显示标签（此处：date）和数据点值（此处：price），而是第三个值，即， more_info.

我也知道使用 自定义工具提示的方式 ，但也不知道如何从我的情况下扩展它简单地使用 tooltipItem.xLabel (date) 和 tooltipItem.yLabel (price)，而不是第三个关联值。

Answer 1

这是一个使用工具提示的解决方案（忽略 OP 中的 Ajax）：

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

带有自定义工具提示的完整代码笔：https://codepen.io/kh_one/pen/OJJPBpJ。

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

How to have onclick/hover display associated value in ChartJS

javascript

tooltip

chart.js