如何在 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 myChartfunction refresh_graph() {&nbsp; var labels = ["Monday", "Tuesday", "Wednesday","Thursday","Friday","Saturday","Sunday"]&nbsp; var defaultData = [0.1,0.5,0.3,0.4,0.6,0.8,0.3]&nbsp; var more_info = ["Monday info", "Tuesday info", "Wednesday info","Thursday info","Friday info","Saturday info","Sunday info"]&nbsp; if(myChart){&nbsp; &nbsp; myChart.destroy();&nbsp; }&nbsp; var ctx = document.getElementById('myChart').getContext('2d');&nbsp; myChart = new Chart(ctx, {&nbsp; &nbsp; type: 'line',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; labels: labels,&nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; label: "Price",&nbsp; &nbsp; &nbsp; &nbsp; data: defaultData,&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'rgba(54, 162, 235, 0.2)',&nbsp; &nbsp; &nbsp; &nbsp; borderColor: 'rgba(54, 162, 235, 1)',&nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 2,&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; },&nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; responsive : true,&nbsp; &nbsp; &nbsp; tooltips : {&nbsp; &nbsp; &nbsp; &nbsp; callbacks : {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title : function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 'More information:';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; afterLabel : function(tooltipItem, data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 'Information: ' + more_info[tooltipItem.index];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; elements: {&nbsp; &nbsp; &nbsp; &nbsp; line: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tension: 0&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; display: false&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; suggestedMin: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; suggestedMax: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; animation: {&nbsp; &nbsp; &nbsp; &nbsp; duration: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; hover: {&nbsp; &nbsp; &nbsp; &nbsp; animationDuration: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; responsiveAnimationDuration: 0&nbsp; &nbsp; }&nbsp; })&nbsp; setTimeout(refresh_graph, 50000);}setTimeout(refresh_graph, 0);带有自定义工具提示的完整 codepen：https ://codepen.io/kh_one/pen/OJJPBpJ 。