Question

我有一个条形图，我希望能够根据条件为条形分配单独的填充颜色。我认为这并不重要，但是我正在使用angular-nvd3 linePlusBarChart绘制条。

更新我的本地环境似乎存在问题，可能是NVD3或角度库，我不确定发生了什么。我把jsfiddle放在一起，一切工作正常。请参见下面的链接，这些条可以具有不同的颜色。但是，在我的本地计算机上，当执行到达该点时，var y = document.querySelector（....，控制台中出现角度错误->>>>> y为空。

http://jsfiddle.net/p0g9Lqu8/

这是HTML。

<nvd3>
<g class="nv-bars">
    <rect x="0" y="419" height="1"  fill="LimeGreen" class="nv-bar positive nv-bar-0-0" width="267"></rect>
    <rect x="0" y="252" height="168"  fill="LimeGreen" class="nv-bar positive nv-bar-0-1" width="267"></rect>
    <rect x="0" y="294" height="126"  fill="LimeGreen" class="nv-bar positive nv-bar-0-2 hover" width="267"></rect>
    <rect x="0" y="252" height="168"  fill="LimeGreen" class="nv-bar positive nv-bar-0-3" width="267"></rect>
</g>
</nvd3>

如您所见，每个rect标记都有一个动态CSS类nv-bar-0-1，nv-bar-0-2 ..，我希望能够从JS指向它。注意：从HTML，如果我使用CSS，则所有工作正常，但从JS循环开始，一切正常。任何帮助表示赞赏。

这非常有用。

<style>
nvd3 .nv-bars rect {
    fill:white;
}

nvd3 .nv-bars rect.nv-bar-0-1{
    fill:yellow;
}
  </style>

但是，这不是：

for(var i = 0; i < 4; i++) {
     var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i); 
     y.style.fill = "#ffff00";
}

或与此相同的结果

var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1); // y is always null
y.style.fill = "#ffff00"; // triggers null reference error here

我在此块中的Angular控制器中调用该JS片段：

     angular.element(document).ready(function () {
        var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
        console.log('>>>>>>>>>>>===' + y); // this outputs [object    HTMLUnknownElement]
        y.style.fill = "#ffff00";
    });

Answer 1

我感谢大家的时间和投入。我终于找到了问题所在和解决方案，所以我希望与社区分享该问题，以防有人遇到类似问题。

我最终输入浏览器的结果是结合了多个HTML / JS / CSS片段的结果。问题在于时机：JS代码试图引用一个标签，但是在JS引用时，带有HTML / CSS的标签动态构建似乎还没有完成。

angular.element（document）.ready（....无法完成这项工作，但是下面链接中的纯JS方法-可以。

https://github.com/jfriend00/docReady

我将用于检查某些条件并为条形分配颜色的JS块封装到docReady块中。请参见下面的简化代码示例。

           docReady(function () {

                for (var i = 0; i < 4; i++) {
                    var k = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i);
                    // some condition goes here.....
                    k.style.fill = "green";

                }

                var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
                // this too changes color
                y.style.fill = "#ff0000";
         });

可用于所有主流浏览器：Firefox，Chrome，Safari和IE

如何从JS更改动态CSS类的bg颜色

1 个答案: