C3.js 工具提示不显示任何文本

Question

我使用的是 C3.js 的 0.7.1 版，我用以下代码创建了一个圆环图：


var chart = c3.generate({
        data: {
            columns: [
                ['Critical', 100],
                ['High', 200],
                ['Informational', 300],
                ['Medium', 400],
                ['Low', 500],
            ],
            type : 'donut',
        },
        donut: {
            title: "Finding Severities"
        },
        tooltip: {
            format: {
                value: function (value, ratio, id, index) { return value + " " + id + " Findings"; }
            }
        }

    });

除了显示空白框而不是我尝试打印的值的工具提示外，一切都运行良好。即使我删除了自定义工具提示格式，默认工具提示仍然不会显示。

我没有为 C3.js 修改 css 和 js 文件，而当我运行他们的网站 (https://c3js.org/samples/chart_donut.html)，它工作得很好。

以下是我尝试查看我网站上的工具提示时显示的内容：

这就是我想要显示的内容（如果您运行此代码在 https://c3js.org/samples/chart_donut.html 上应该会发生什么）：

Answer 1

不是完整的答案，但太大而无法放入评论中：

某处某处正在将 table 单元格元素的 css 颜色样式设置为 'white'（或“#fff”）。 c3.css 本身没有这个属性的规则，所以这将在您加载的另一个 css 文件中设置，或者它可能是您使用的任何浏览器的默认设置。

c3 演示页面使用另一个 css 文件 foundation.css，将其设置为“#222”。（我可以通过将 css 文件的 rule/property 组合的值更改为 'white' 来重现您的问题）。上面链接的 jsfiddle 使用浏览器默认值，对我来说 chrome 是“#000”。

所以添加这个 css 规则，我 90% 确定问题消失了：

.c3-tooltip td {
    color: #222;
}

C3.js 工具提示不显示任何文本

C3.js Tooltips not Showing any text

javascript

c3.js