Question

我需要显示来自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
}

这是我用来从

获取数据的代码

$.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');
    }
});

这是我将图表附加到

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

它只显示来自数据源的最后一个数据，这是我从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"]}

谢谢。

Answer 1

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

要避免这种情况，您可以创建一个新元素并将其附加到目标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/

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

1 个答案: