Question

我在Laravel 5中使用Charts JS来显示条形图，数据正确地传递给视图，但是图表没有显示条形图，所以，我在警报中打印了数据的内容，用：

alert(JSON.stringify(areaChartData, null, 4));

我明白了：

{
    "labels": [
        "Asistencia",
        "Inasistencia"
    ],
    "datasets": [
        {
            "label": "Asistencia",
            "fillColor": "rgba(210, 214, 222, 1)",
            "strokeColor": "rgba(210, 214, 222, 1)",
            "pointColor": "rgba(210, 214, 222, 1)",
            "pointStrokeColor": "#c1c7d1",
            "pointHighlightFill": "#fff",
            "pointHighlightStroke": "rgba(220,220,220,1)",
            "data": 67
        },
        {
            "label": "Inasistencia",
            "fillColor": "rgba(60,141,188,0.9)",
            "strokeColor": "rgba(60,141,188,0.8)",
            "pointColor": "#3b8bba",
            "pointStrokeColor": "rgba(60,141,188,1)",
            "pointHighlightFill": "#fff",
            "pointHighlightStroke": "rgba(60,141,188,1)",
            "data": 33
        }
    ]
}

这意味着数据加载得很好。 BarChart的代码是：

var areaChartData = {
                    labels: ["Asistencia", "Inasistencia"],
                    datasets:[
                        {
                            label: "Asistencia",
                            fillColor: "rgba(210, 214, 222, 1)",
                            strokeColor: "rgba(210, 214, 222, 1)",
                            pointColor: "rgba(210, 214, 222, 1)",
                            pointStrokeColor: "#c1c7d1",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data:{!!json_encode($Incidentes->asistencia)!!}
                        },
                        {
                            label: "Inasistencia",
                            fillColor: "rgba(60,141,188,0.9)",
                            strokeColor: "rgba(60,141,188,0.8)",
                            pointColor: "#3b8bba",
                            pointStrokeColor: "rgba(60,141,188,1)",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(60,141,188,1)",
                            data:{!!json_encode($Incidentes->inasistencia)!!}
                        }
                    ]
                };

                //- BAR CHART -
                //-------------
                var barChartCanvas = $("#barChart").get(0).getContext("2d");
                var barChart = new Chart(barChartCanvas);
                var barChartData = areaChartData;
                barChartData.datasets[1].fillColor = "#00a65a";
                barChartData.datasets[1].strokeColor = "#00a65a";
                barChartData.datasets[1].pointColor = "#00a65a";
                var barChartOptions = {
                    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
                    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
                    responsive: true,
                    maintainAspectRatio: false
                };
                barChartOptions.datasetFill = false;
                barChart.Bar(barChartData, barChartOptions);

之前，我有一个示例数据数组，图表加载正常，所以这里发生了什么，为什么它没有显示？

Answer 1

固定！问题是从后端发送的值只有一个而不是数组，所以它缺少 []

BarChart没有显示数据

1 个答案: