通过Java脚本自动化Highcharts

Question

我正在使用java脚本自动化High chart图表。因为这在硒中是不可能的。 网址为https://www.highcharts.com/demo/bar-basic

我已经确定，这个类包含我需要添加的值。即tspan [2]

我发现这个dom元素将长度作为长度返回

document.getElementsByClassName("highcharts-label highcharts-data-label highcharts-data-label-color-0")

<g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker " transform="translate(68,73) scale(1 1)" opacity="1">
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(17,2)" opacity="0" visibility="hidden">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">107</tspan>
<tspan x="5" y="16">107</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(5,54)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">31</tspan>
<tspan x="5" y="16">31</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(102,106)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">635</tspan>
<tspan x="5" y="16">635</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(33,158)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">203</tspan>
<tspan x="5" y="16">203</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(0,211)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">2</tspan>
<tspan x="5" y="16">2</tspan>
</text>
</g>
</g>

同样，我有不同的棕色和绿色类。 HTML是

<g class="highcharts-data-labels highcharts-series-1 highcharts-bar-series highcharts-color-1 highcharts-tracker " transform="translate(68,73) scale(1 1)" opacity="1">
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(21,12)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">133</tspan>
<tspan x="5" y="16">133</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(25,64)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">156</tspan>
<tspan x="5" y="16">156</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(152,117)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">947</tspan>
<tspan x="5" y="16">947</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(65,169)">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">408</tspan>
<tspan x="5" y="16">408</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(1,221)" opacity="0" visibility="hidden">
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16">
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">6</tspan>
<tspan x="5" y="16">6</tspan>
</text>
</g>
</g>

如何使用父类遍历子元素？ 有办法吗？

Answer 1

您可以尝试以下

document.getElementsByClassName("highcharts-label highcharts-data-label highcharts-data-label-color-0")[0].getElementsByTagName("tspan")[1]