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

时间:2019-06-25 14:07:08

标签: javascript c3.js

我正在使用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"; }
            }
        }

    });

除了工具提示用空白框而不是我要打印的值显示之外,所有其他功能都可以正常工作。即使我删除了自定义工具提示格式,默认的工具提示仍然不会显示。

我尚未为css 修改过jsC3.js文件,并且在我的网站(https://c3js.org/samples/chart_donut.html)上运行了相同的代码,效果很好。

当我尝试在自己的网站上查看工具提示时,会显示以下内容:

enter image description here

这就是我要显示的内容(如果您在https://c3js.org/samples/chart_donut.html上运行此代码,这应该会发生):

enter image description here

1 个答案:

答案 0 :(得分:1)

答案不完整,但太大而无法评论:

某处某处正在将表格单元格元素的CSS颜色样式设置为“白色”(或“ #fff”)。 c3.css本身对此属性没有规则,因此将在您加载的另一个css文件中进行设置,或者它可能是您使用的任何浏览器的默认文件。

c3演示页面使用另一个css文件foundation.css,将其设置为“#222”。 (我可以通过将该规则/属性组合的css文件的值更改为“白色”来重新创建您的问题)。上面链接的jsfiddle使用的浏览器默认值在我的Chrome中是“#000”。

因此添加此css规则,我90%确信问题消失了:

.c3-tooltip td {
    color: #222;
}
相关问题