Chart.js 2.0 - 工具提示在悬停时显示不完整的数据

deamon 发表于 Dev

恶魔

工具提示仅显示数据点的详细信息，而不是显示标签下的所有值。我想在工具栏中显示所有详细信息，假设当用户将鼠标悬停在标签为 1 的点上时，它应该在工具提示中显示以下内容。这是jsbin。

1

素数和斐波那契数：2

我的第二个数据集：2

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line Chart Test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>
  <script language="JavaScript"><!--
  function displayLineChart() {
    var data = {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
            {
                label: "Prime and Fibonacci",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "red",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34]
            }
        ]
    };
    var holder = document.getElementById('lineChart');
    var options = {};
    new Chart(holder, {
                type: 'line',
                data: data,
                options: {
                    responsive: true
                }
            });
  }
  --></script>
</head>
<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>
</html>

用户7364438

您可以使用工具提示回调函数，请在此处阅读线程。我已在下方更新了您的功能，您可以开始使用了。祝你好运！

function displayLineChart() {
    var data = {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
            {
                label: "Prime and Fibonacci",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "red",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34]
            }
        ]
    };
    var holder = document.getElementById('lineChart');
    var options = {};
    new Chart(holder, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        console.log(tooltipItem);
                        console.log( data.datasets[0])
                        var value = data.datasets[0].data[tooltipItem.index];
                        var label = data.labels[tooltipItem.index];
                        var datah = [];
                        datah.push(data.datasets[0].label + ' ' + value);
                        datah.push(data.datasets[1].label + ' ' + value);
                        return datah;
                    }
                }
            }
        }
    });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。