使用Chart.js在一个页面中绘制多个图表

I need to show multiple chart from data which i get from ajax source. But i don't know why Chart.js only show one chart at a time although i made new dataset as well as new canvas for each chart. Please help me, this is the javascript code which i used to draw chart.

我需要显示来自ajax源的数据的多个图表。但我不知道为什么Chart.js一次只显示一个图表,尽管我为每个图表创建了新的数据集和新的画布。请帮帮我,这是我用来绘制图表的javascript代码。

function showBarChart(label, index, key){
    var areaChartOptions = {
        scaleBeginAtZero : true,

        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines : true,

        //String - Colour of the grid lines
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth : 1,

        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,

        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,

        //Boolean - If there is a stroke on each bar
        barShowStroke : true,

        //Number - Pixel width of the bar stroke
        barStrokeWidth : 2,

        //Number - Spacing between each of the X value sets
        barValueSpacing : 5,

        //Number - Spacing between data sets within X values
        barDatasetSpacing : 1,

        //String - A legend template
        legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",

        //Boolean - whether to make the chart responsive to window resizing
        responsive: true,
        animationSteps: 15,
        scaleLabel: "          <%=value%>"
    };

    document.getElementById('metterpanel').innerHTML = '';
    for(i = 0; i < key.length; i++){
        var datakey = key[i];

        document.getElementById('metterpanel').innerHTML += ' <div class="col-md-2 ">' + '<div class="meter">' + '<div>' +
            ' <canvas id="' + datakey + '" style="height: 180px;"></canvas>' + ' <div class="ColProduct Product">' + '<div class="ProContent Pro-Name">' + datakey
            +' </div>' + '</div>' + '</div>' + '</div>'+ '</div>';

        var startingData = {
            labels: [label[datakey]],
            datasets: [
                {
                    label: datakey + ' Consumed',
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [index[datakey]]
                }
            ]
        };

        //-------------
        //- LINE CHART -
        //--------------
        var lineChartCanvas = $("#"+datakey).get(0).getContext("2d");
        var datakey = new Chart(lineChartCanvas).Bar(startingData, areaChartOptions);
        var lineChartOptions = areaChartOptions;
        lineChartOptions.datasetFill = false;
    }
    //loop begin

    //endloop
}

This is the code i used to get data from

这是我用来获取数据的代码

$.ajax({
    type: "GET",
    url: "/getListIndex?Data=" + stringlist,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (datas) {
        showBarChart(datas.label, datas.index, datas.key);
    },
    failure: function (response) {
        alert('error');
    }
});

and this is the parent div which i append charts to

这是我附加图表的父div

<div class="col-md-8 ">
    <p class="text-center infomess">
        <strong></strong>
    </p>
    <!-- begin loop -->
    <div class="metterpanel" id="metterpanel">
    </div>
    <!-- end loop -->
</div><!-- /.col -->

It is just show the last data from data source and this is the json i got from ajax:

它只显示来自数据源的最后一个数据,这是我从ajax得到的json:

{"success":true,"label":{"740100001":"01:18:26","740100003":"03:53:33","740100004":"09:12:04"},"index":{"740100001":0,"740100003":0,"740100004":0},"date":"11:11:00","fulldate":{"740100001":"17\/11\/2015","740100003":"18\/11\/2015","740100004":"25\/11\/2015"},"key":["740100001","740100003","740100004"]}

Thank you.

1 个解决方案

#1

The reason you only see the last graph is because you are clearing the canvas you have drawn within each loop when you do this document.getElementById('metterpanel').innerHTML +=

您只看到最后一个图形的原因是因为您在执行此文档时清除了在每个循环中绘制的画布.getElementById('metterpanel')。innerHTML + =

To avoid this you could create a new element and append it to the target div. This will avoid your previous drawn canvases being cleared.

为避免这种情况,您可以创建一个新元素并将其附加到目标div。这样可以避免以前绘制的画布被清除。

var newElement = $(' <div class="col-md-2 ">' + '<div class="meter">' + '<div>' +
            ' <canvas id="' + datakey + '"></canvas>' + ' <div class="ColProduct Product">' + '<div class="ProContent Pro-Name">' + datakey + ' </div>' + '</div>' + '</div>' + '</div>' + '</div>');
$('#metterpanel').append(newElement);

http://jsfiddle.net/leighking2/883g65xa/

#1