Chart.js工具提示未显示

Question

我正在尝试为我的图表添加工具提示，选项已正确加载，但是工具提示没有显示，有什么想法吗？

        <script>

        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    fillColor : "rgba(139, 157, 195, 1)",
                    strokeColor : "#4c66a4",
                    pointColor : "#fff",
                    pointStrokeColor : "#3b5998",
                    pointHighlightFill: "#fff",
                    data : [{{implode(',', $fanCounts)}}]

                }
            ]
        }

        var options = {
                    showTooltips: true,
                    tooltipEvents: ["mousemove", "touchstart", "touchmove"],
                    tooltipFillColor: "rgba(0,0,0,0.8)"
                }

        var myLine = new Chart(document.getElementById("fancanvas").getContext("2d")).Line(lineChartData, options);

        </script>

我已经更改了chart.js的全局配置，以启用线图的工具提示。

- djbberko

---

这个由Chatri Sae-Tung提供的解决方案对我有用：http://stackoverflow.com/a/24722857/2595830 - Daniel Broughan

我的问题是由于共享的 config 变量引起的: https://stackoverflow.com/a/47519851/722036 - ᴍᴇʜᴏᴠ

Answer 1

如果你在使用Chartjs v3时遇到问题，需要确保已注册Tooltip插件：

import { Chart, Tooltip } from 'chart.js'

Chart.register([Tooltip])

- Jesper Paulsen

---

谢谢您。这是一个很容易被忽视的简单事情。 - Quiver

大家好，导入...在我的情况下会出现“未捕获的SyntaxError：无法在模块外部使用import语句”。我只是将导入语句添加到我的主js文件中... - Andreas

这段代码放在哪里？ - undefined

抱歉回复晚了，@Andreas。在不了解你项目的其他细节之前，很难给你提供帮助。但我建议你查看这里的答案：https://stackoverflow.com/a/64655153/11722925。 - undefined

@ZdeněkBednařík 这取决于你的项目。只要它被执行，这就是唯一的要求。这里有一个使用React的示例：https://github.com/Jesperpaulsen/data-collector/blob/main/packages/data-visualizer/src/components/common/Charts/ChartRenderer.tsx#L16 - undefined

Answer 2

var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true,
        showTooltips: true,
        multiTooltipTemplate: "<%= value %>",
    });

使用此（全局设置）。

- Arun Yokesh

Answer 3

你只需要用一个值设置背景：

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

拥抱...

- Assis Runny