在chartJs中使用动态数组来表示标签和数据

时间:2015-08-20 02:16:35

标签: javascript jsp chart.js

我的图表存在问题,我正在使用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&amp;来自Servlet的dr Arraylist<Double>; 从{Servlet

收到ref Arraylist<String>

脚本:

<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>

此代码仅显示图表图例! 谢谢你的帮助

1 个答案:

答案 0 :(得分:0)

我通过转换集合将其解析为数组:

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;}