javascript - 如何将工具提示添加到 chart.js 图表

标签 javascript charts chart.js

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

    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

上面的链接似乎不再可用

但是它可用here在 Github

您可以查看文档 here

关于javascript - 如何将工具提示添加到 chart.js 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15979149/

相关文章:

javascript - 如何延迟 for 循环并运行 Canvas 操作?

javascript - 卸载前保存

android - 需要帮助定位和 margin 图表引擎

javascript - Php 和 Html 图表使用 Canvas.js 使用 mysql 数据库

javascript - 如何向浮点图中添加一个新的单点?

javascript - 如何使用正确的值在 plotly.js 中制作堆积面积图?

chart.js - 对于没有数据的饼图显示 "No Data"消息

javascript - 在 ChartJS 中添加背景文本

angular - 更改 ng2-charts/charts.js 饼图上的标签颜色

javascript - 在 IE 中启用弹出窗口拦截器