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

【问题标题】：nvd3 charts - changing text color in hover boxesnvd3 图表 - 更改悬停框中的文本颜色
【发布时间】：2019-12-18 17:39:58
【问题描述】：

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

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

这是我的一个图表 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;
});

【问题讨论】：

标签： javascript html css nvd3.js

【解决方案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 值。非常烦人。

【讨论】：