如何使用 chart.js 在点悬停中显示多个值

Question

我想知道是否可以在 chart.js 中悬停点时显示更多值。

看看这个fiddle。这是取自 chart.js 站点的微笑图示例。如果我将鼠标悬停在一个点上，它会显示数据集值。

如何显示其他值。就像沿着这个阵列。

[65, 59, 80, 81, 56, 55, 40]

如果我想显示这个数组值 [1, 2, 3, 4, 5, 6, 7]。就像我想显示编号一样。这只是一个示例，实际上我想显示更多两个值，但不想将其绘制在仅在悬停中显示的图表上。就像 65 一样，它表明它是第一个值。

如有任何帮助，我们将不胜感激。

Answer 1

可以，请使用下面的 工具提示 选项

var ctx = document.getElementById('chart1').getContext("2d");
    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};



var options = {
        responsive: true,
        title: {
            display: true,
            position: "top",
            text: 'anything',
            fontSize: 18,
            fontColor: "#111"
        },
        tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                       var multistringText = [tooltipItems.yLabel];
                           multistringText.push('Another Item');
                           multistringText.push(tooltipItems.index+1);
                           multistringText.push('One more Item');
                        return multistringText;
                    }
                }
            },
        legend: {
            display: true,
            position: "bottom",
            labels: {
                fontColor: "#333",
                fontSize: 16
            }
        },
        scales:{
            yAxes:[{
                ticks:{
                    min:0

                }
            }]

        }
    };
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="chart1"></canvas>

Answer 2

如果您想在工具提示中的现有项目下方显示数据，您可以使用 3 种不同的工具提示 footer 回调。只需将要显示的内容定义为 chart.js 范围之外的数组，并使用索引引用它。

tooltips: {
    enabled: true,
    mode: 'single',
    callbacks: {
        beforeFooter: function(tooltipItems, data) { 
          return 'Point #: ' + footerLine1[tooltipItems[0].index];
        },
        footer: function(tooltipItems, data) { 
          return 'Other Data: ' + footerLine2[tooltipItems[0].index];
        }
    }
},

请记住，您只有 3 行可以使用（例如 3 个页脚回调）

参见示例 here。

Answer 3

工具提示：{ 模式：'index' }

将此添加到选项

如何使用 chart.js 在点悬停中显示多个值

how to show multiple values in point hover using chart.js

html

javascript

charts

chart.js

chart.js2