我如何使用javascript通过其高度更改矩形的颜色（填充值），但按值范围调整颜色，即，如果高度为0到50，则为红色，橙色为51至100，橙色为101+。
它是一个自动生成的svg图表，因此我无法直接修改它，因为我使用的是CRM，只能让我放置JS ...
有没有办法做到这一点？
<rect x="15.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="78.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="141.5" y="134.5" width="31" height="171" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="204.5" y="159.5" width="31" height="146" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="266.5" y="256.5" width="31" height="49" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="329.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="392.5" y="159.5" width="31" height="146" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="454.5" y="305.5" width="31" height="0" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="517.5" y="110.5" width="31" height="195" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="580.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="643.5" y="85.5" width="31" height="220" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="705.5" y="61.5" width="31" height="244" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="768.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="831.5" y="85.5" width="31" height="220" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="894.5" y="232.5" width="31" height="73" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
到目前为止，我有这个按钮，但是不起作用...
<button type="button"
onclick="document.querySelectorAll('rect[height]').setAttribute('fill', '#ff0000');">
Click Me!</button>
这是一个jsfiddle： https://jsfiddle.net/0pdfqu9g/19/
答案 0 :(得分：0)
您的jsfiddle无效，因为您似乎已经将图形粘贴了两次。
我已经删除了它，并重新格式化了下面的标记，还实施了您想要的颜色测试之一。我确定您现在可以添加其他人。
包含测试可阻止图例矩形着色。由于您没有图例，因此我根本不知道您为什么要该标记，因此您可以删除它，然后也不需要检查。
function go() {
var rects = document.querySelectorAll('rect[height]');
rects.forEach(r => {
if (r.parentElement.className.animVal.includes("highcharts-legend-item")) return;
if (r.height.animVal.value < 50) r.setAttribute('fill', '#ff0000')
});
}<button type="button" onclick="go()">Click Me!</button>
<svg version="1.1" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
<desc>Created with Highcharts 4.2.4</desc>
<defs>
<clipPath id="highcharts-1">
<rect x="0" y="0" width="941" height="305"></rect>
</clipPath>
</defs>
<rect x="0" y="0" width="1000" height="500" fill="#FFFFFF" class=" highcharts-background"></rect>
<g class="highcharts-grid"></g>
<g class="highcharts-grid">
<path fill="none" d="M 49 315.5 L 990 315.5" stroke="#D8D8D8" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 49 254.5 L 990 254.5" stroke="#D8D8D8" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 49 193.5 L 990 193.5" stroke="#D8D8D8" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 49 132.5 L 990 132.5" stroke="#D8D8D8" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 49 71.5 L 990 71.5" stroke="#D8D8D8" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 49 9.5 L 990 9.5" stroke="#D8D8D8" stroke-width="1" opacity="1"></path>
</g>
<g class="highcharts-axis">
<path fill="none" d="M 111.5 315 L 111.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 173.5 315 L 173.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 236.5 315 L 236.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 299.5 315 L 299.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 362.5 315 L 362.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 424.5 315 L 424.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 487.5 315 L 487.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 550.5 315 L 550.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 613.5 315 L 613.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 675.5 315 L 675.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 738.5 315 L 738.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 801.5 315 L 801.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 864.5 315 L 864.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 926.5 315 L 926.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 990.5 315 L 990.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 48.5 315 L 48.5 325" stroke="#C0D0E0" stroke-width="1" opacity="1"></path>
<path fill="none" d="M 49 315.5 L 990 315.5" stroke="#C0D0E0" stroke-width="1"></path>
</g>
<g class="highcharts-axis">
<text x="10.046875" text-anchor="middle" transform="translate(0,0) rotate(270 10.046875 162.5)" class=" highcharts-yaxis-title" style="color:#888;font-style:italic;fill:#888;" y="162.5"></text>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(49,10) scale(1 1)" style="" clip-path="url(#highcharts-1)">
<rect x="15.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="78.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="141.5" y="134.5" width="31" height="171" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="204.5" y="159.5" width="31" height="146" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="266.5" y="256.5" width="31" height="49" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="329.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="392.5" y="159.5" width="31" height="146" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="454.5" y="305.5" width="31" height="0" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="517.5" y="110.5" width="31" height="195" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="580.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="643.5" y="85.5" width="31" height="220" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="705.5" y="61.5" width="31" height="244" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="768.5" y="183.5" width="31" height="122" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="831.5" y="85.5" width="31" height="220" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
<rect x="894.5" y="232.5" width="31" height="73" stroke="#FFFFFF" stroke-width="1" fill="#7cb5ec" rx="0" ry="0"></rect>
</g>
<g class="highcharts-markers highcharts-series-0" transform="translate(49,10) scale(1 1)" clip-path="none"></g>
</g>
<g class="highcharts-data-labels highcharts-series-0 highcharts-tracker" visibility="visible" transform="translate(49,10) scale(1 1)" opacity="1" style="">
<g style="" transform="translate(23,157)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>5</tspan>
</text>
</g>
<g style="" transform="translate(86,157)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>5</tspan>
</text>
</g>
<g style="" transform="translate(149,108)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>7</tspan>
</text>
</g>
<g style="" transform="translate(212,133)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>6</tspan>
</text>
</g>
<g style="" transform="translate(274,230)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>2</tspan>
</text>
</g>
<g style="" transform="translate(337,157)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>5</tspan>
</text>
</g>
<g style="" transform="translate(400,133)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>6</tspan>
</text>
</g>
<g style="" transform="translate(462,279)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>0</tspan>
</text>
</g>
<g style="" transform="translate(525,84)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>8</tspan>
</text>
</g>
<g style="" transform="translate(588,157)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>5</tspan>
</text>
</g>
<g style="" transform="translate(651,59)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>9</tspan>
</text>
</g>
<g style="" transform="translate(709,35)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>10</tspan>
</text>
</g>
<g style="" transform="translate(776,157)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>5</tspan>
</text>
</g>
<g style="" transform="translate(839,59)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>9</tspan>
</text>
</g>
<g style="" transform="translate(902,206)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:none;fill:#000000;text-rendering:geometricPrecision;" y="16">
<tspan>3</tspan>
</text>
</g>
</g>
<g class="highcharts-legend" transform="translate(482,474)">
<g>
<g>
<g class="highcharts-legend-item" transform="translate(8,3)">
<text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15"></text>
<rect x="0" y="4" width="16" height="12" fill="#7cb5ec"></rect>
</g>
</g>
</g>
</g>
<g class="highcharts-axis-labels highcharts-xaxis-labels">
<text x="82.95939153101733" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:107;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 82.95939153101733 331)" y="331" opacity="1">
<tspan>Abel</tspan>
</text>
<text x="145.69272486435068" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 145.69272486435068 331)" y="331" opacity="1">
<tspan>Anahi</tspan>
</text>
<text x="208.42605819768403" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 208.42605819768403 331)" y="331" opacity="1">
<tspan>Arturo</tspan>
</text>
<text x="271.1593915310173" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 271.1593915310173 331)" y="331" opacity="1">
<tspan>David</tspan>
</text>
<text x="333.89272486435067" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 333.89272486435067 331)" y="331" opacity="1">
<tspan>Eduardo</tspan>
</text>
<text x="396.626058197684" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 396.626058197684 331)" y="331" opacity="1">
<tspan>Emmanuel</tspan>
</text>
<text x="459.3593915310173" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 459.3593915310173 331)" y="331" opacity="1">
<tspan>Itzel </tspan>
</text>
<text x="522.0927248643507" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 522.0927248643507 331)" y="331" opacity="1">
<tspan>Jose</tspan>
</text>
<text x="584.826058197684" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 584.826058197684 331)" y="331" opacity="1">
<tspan>Karen </tspan>
</text>
<text x="647.5593915310174" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 647.5593915310174 331)" y="331" opacity="1">
<tspan>Karla </tspan>
</text>
<text x="710.2927248643507" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 710.2927248643507 331)" y="331" opacity="1">
<tspan>Karla</tspan>
</text>
<text x="773.026058197684" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 773.026058197684 331)" y="331" opacity="1">
<tspan>Melissa</tspan>
</text>
<text x="835.7593915310173" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 835.7593915310173 331)" y="331" opacity="1">
<tspan>Pedro </tspan>
</text>
<text x="898.4927248643506" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 898.4927248643506 331)" y="331" opacity="1">
<tspan>Ricardo</tspan>
</text>
<text x="961.226058197684" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:500px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 961.226058197684 331)" y="331" opacity="1">
<tspan>Valeria</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels">
<text x="34" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:320px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="318" opacity="1">0</text>
<text x="34" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:320px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="74" opacity="1">10</text>
<text x="34" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:320px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="257" opacity="1">3</text>
<text x="34" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:320px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="196" opacity="1">5</text>
<text x="34" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:320px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="135" opacity="1">8</text>
<text x="34" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:320px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="13" opacity="1">13</text>
</g>
<g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(225,-9999)" opacity="0" visibility="visible">
<path fill="none" d="M 3.5 0.5 L 211.5 0.5 C 214.5 0.5 214.5 0.5 214.5 3.5 L 214.5 46.5 C 214.5 49.5 214.5 49.5 211.5 49.5 L 112.5 49.5 106.5 55.5 100.5 49.5 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path>
<path fill="none" d="M 3.5 0.5 L 211.5 0.5 C 214.5 0.5 214.5 0.5 214.5 3.5 L 214.5 46.5 C 214.5 49.5 214.5 49.5 211.5 49.5 L 112.5 49.5 106.5 55.5 100.5 49.5 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path>
<path fill="none" d="M 3.5 0.5 L 211.5 0.5 C 214.5 0.5 214.5 0.5 214.5 3.5 L 214.5 46.5 C 214.5 49.5 214.5 49.5 211.5 49.5 L 112.5 49.5 106.5 55.5 100.5 49.5 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path>
<path fill="rgba(249, 249, 249, .85)" d="M 3.5 0.5 L 211.5 0.5 C 214.5 0.5 214.5 0.5 214.5 3.5 L 214.5 46.5 C 214.5 49.5 214.5 49.5 211.5 49.5 L 112.5 49.5 106.5 55.5 100.5 49.5 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#7cb5ec" stroke-width="1"></path>
<text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20">
<tspan>Eduardo Isaac Ledessma Torres - </tspan>
<tspan style="font-weight:bold" x="8" dy="15">2</tspan>
</text>
</g>
</svg>