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

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                        },我试图弄清楚如何做到这一点，当用户点击或悬停在图表中的一个数据点（即 a priceat a date）上时（我会很高兴），他们会请参阅相关的more_info.我所知道的这个使用getElementById，但无法弄清楚如何延伸到这样的情况，在那里我不希望显示标签（这里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);

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