在 chartJs 中使用动态数组作为标签和数据

Question

我的图表有问题，我正在使用 chartJS（图表中没有数据或标签！）

我的jsp:

<div id="aa">
                            <div id="bb">
                                <canvas float="right" id="buyers1" width="600" height="400"></canvas>
                                <div id="legendDiv"></div>
                            </div>                          
                        </div>
                        <br/>


                        <c:forEach items="${ dr }" var="duree"  varStatus="boucle1">
                            <input id="k1" type="hidden" name=dr value="${duree}" />
                        </c:forEach>

                        <c:forEach items="${ ent }" var="entretien" varStatus="boucle1">
                            <input id="k1" type="hidden" name="ent" value="${entretien}" />
                        </c:forEach>

                        <c:forEach items="${ ref }" var="reference" varStatus="boucle1">
                            <input id="k1" type="hidden" name="ref" value="${reference}" />
                        </c:forEach>

ent & dr 是从 Servlet 收到的 Arraylist<Double>； ref 是 Arraylist<String> 从 Servlet

收到的

脚本：

<script>


var dr = document.getElementsByName("dr");
var ref = document.getElementsByName("ref");
var ent = document.getElementsByName("ent");
var buyerData = {
        labels : ref,
        datasets : [
            {
                label: 'Réalisé de mois systématique (en h)',
                type: "bar",                
                strokeColor : "#008000",
                pointColor : "#008000",
                pointStrokeColor : "#fff",              
                data : ent
            },

            {
                label: 'Réalisé de mois Curatif (en h)',
                type: "bar",
                fillColor : "#0000ff",
                strokeColor : "#0000ff",
                data : dr
            }

        ]
    };     

        window.onload = function() {

            window.myOverlayChart = new Chart(document.getElementById("buyers1").getContext("2d")).Overlay(buyerData, {
                populateSparseData: true,
                overlayBars: true,
                datasetFill: false,
                labelLength: 9,
                scaleShowVerticalLines: false,
                scaleShowHorizontalLines: false
            });       
        }       
        legend(document.getElementById("legendDiv"), buyerData);    
</script>

此代码仅显示图表图例！感谢您的帮助

Answer 1

我通过将集合转换为数组来解决此问题：

var refC = document.getElementsByName("ref");
var ref =[];
for(var i = 0; i < refC.length; i++){
ref[i]=document.getElementsByName("ref")[i].value;}

var entC = document.getElementsByName("ent");
var ent =[];
for(var i = 0; i < entC.length; i++){
ent[i]=document.getElementsByName("ent")[i].value;}

在 chartJs 中使用动态数组作为标签和数据

using dynamic array in chartJs for label and data

javascript

jsp

chart.js