Как сделать так, чтобы 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, но не могу понять, как распространить это на такой случай, когда я не ищу отображение метки (здесь: date) и значения точки данных (здесь: price), а скорее третье значение, то есть more_info.

Мне также известен этот способ использования пользовательских всплывающих подсказок , но также можно 'не могу понять, как это расширить, если я просто использую tooltipItem.xLabel (date) и tooltipItem.yLabel (price), в отличие от третьего, связанного значения.

Answer 1

Вот решение с использованием всплывающих подсказок (игнорируя Ajax из OP):

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.