如何向 chart.js 图表添加工具提示 [英] How to add tooltips to chart.js graph

问题描述

我正在开发一个 web 应用程序，最近我用 chart.js 交换了谷歌图表，因为它在视觉上更具吸引力.但是，我的一个损失是我无法再获得高于数据点的工具提示.我想知道是否有人知道如何做到这一点，因为我是 javascript 新手.这是图表和设置的代码:

I'm working on a webapp and I recently swapped google charts with chart.js because it is visually more appealing. However, the one loss that I took is that I can no longer get tooltips above the data points. I was wondering if anyone knows how this can be done as I am a novice with javascript. Here is the code for the graph and the settings:

    var data = {
            labels : graphData[0],
            datasets : [
                {
                    fillColor : "rgba(200,160,100,0.5)",
                    strokeColor : "rgba(80,240,70,1)",
                    pointColor : "rgba(80,240,70,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[3]
                },
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[1]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[2]
                }
            ]
        };

        var options = {
            scaleShowGridLines : true,
            scaleShowLabels : true,
            animationSteps : 150,
            scaleOverride: true,
            scaleSteps : Math.max.apply(Math, graphData[3]),
            scaleStepWidth : 1,
            scaleStartValue : 1
        };

        var ctx = document.getElementById("chart_div").getContext("2d");
        ctx.canvas.width  = Math.max(graphData[0].length * 60, 600);
        var myNewChart = new Chart(ctx).Line(data,options);
        $('#chart_area').fadeIn();
        $('html, body').animate({
             scrollTop: $("#picture_area").offset().top
         }, 1000);

推荐答案

有一个带有工具提示的 chartjs 版本可用你可以在这个github页面上得到它https://github.com/Regaddi/Chart.js/tree/tooltips

There is a chartjs version available along with tooltip you can get it in this github page https://github.com/Regaddi/Chart.js/tree/tooltips

上面的链接好像不能用了

Looks like the above link is no longer available

但是它可以在这里在 Github 中使用

However its available here in Github

您可以在此处查看文档

这篇关于如何向 chart.js 图表添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！