javascript - nvd3 图表 - 更改悬停框中的文本颜色

Question

我所有的图表，无论类型如何，都有深灰色(几乎是黑色)背景和黑色文本的弹出框/悬停框 - 几乎无法阅读。图表的颜色部分出现在悬停框中，但文本和标签都是黑色的。

如何更改悬停框中的文本颜色？这是工具提示项还是特定于图表？

这是我的一个图表 JS 的示例，悬停框文本颜色可以在选项中设置还是我需要在 CSS 文件中找到设置 - 如果可以，是哪个设置？ :

    /**
     * Widget 5
     */
    var widget5Option = '3M';
    // Main Chart
    nv.addGraph(function ()
    {
      var chart = nv.models.multiBarChart()
        .options(
            {
                color       : ['#03a9f4', '#b3e5fc'],
                margin      : {
                    top   : 48,
                    right : 16,
                    bottom: 16,
                    left  : 32
                },
                clipEdge    : true,
                groupSpacing: 0.3,
                reduceXTicks: false,
                stacked     : false,
                duration    : 250,
                x           : function (d)
                {
                    return d.x;
                },
                y           : function (d)
                {
                    return d.y;
                },
                yTickFormat : function (d)
                {
                    return d;
                }
            }
        );

    var chartd3 = d3.select('#widget5-main-chart svg')
    var chartData;

    initChart();

    nv.utils.windowResize(chart.update);

    $(window).bind('update:widget5', function ()
    {

        initChart();
    })

    function initChart()
    {
        chartData = data.widget5.mainChart[widget5Option];
        chartd3.datum(chartData).call(chart);
    }

    return chart;
});

Answer 1

好吧...我终于找到了 CSS 值来更改各种图表上弹出窗口中文本的颜色。

在 nv.d3.min.css 中，有值 .nvtooltip - 有各种 .nvtooltip 子定义，但第一个定义为:

.nvtooltip{position:absolute;color:rgba(0,0,0,1);padding:1px;z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.5);border-radius:4px}

我将 color:rbga(0,0,0,1) 更改为 color:white

我花了一天时间才找到它，因为它只出现在悬停在弹出式表格上的​​地方，您不能将鼠标放入其中，因为弹出式表格会随鼠标移动，并且始终距离鼠标指针约 1/2"-因此我可以通过使用 Dev Tools Inspector 单击弹出窗口来查看分配给弹出窗口的 CSS 值。非常烦人。