如何在Chart.js中显示工具提示

How to show tooltips in Chart.js?

本文关键字：显示 工具提示 js Chart      更新时间：2023-09-26

按照教程，这段代码绘制折线图，但没有工具提示。我这里缺少一些配置选项吗?在教程中有工具提示显示。

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var ctx = document.getElementById("chart").getContext("2d");
var myNewChart = new Chart(ctx).Line(chartData, {
    showTooltip: true,
    tooltipTemplate: "<%= value %>"
});

您使用的是哪个版本的chart.js ?

我可以确认工具提示可以使用v1.0.1-beta2

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>

但不能使用v0.2.0。

Version 1.0.1-beta2可从cdnjs获得

可以正常显示工具提示。你在控制台中得到任何错误吗?

我是这样使用你的代码的:

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
window.onload = function(){
    var ctx = document.getElementById("chart").getContext("2d");
    window.myNewChart = new Chart(ctx).Line(chartData, {
        showTooltip: true,
        tooltipTemplate: "<%= value %>"
    });
};

您只需要将backgroundColor设置为单个值而不是数组:

datasets: [{
    label: "# of beauty womens",
    data: [12, 5, 3],
    backgroundColor: "#FC940B",
    fill: false,
    borderColor: "#FC940B"
}]

拥抱…

相关文章：