0
我在Laravel 5中使用Charts JS来显示条形图，数据正确传递给视图，但图表没有显示出条形图，所以我打印在警报中该数据的内容，具有：BarChart未显示数据
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
}
]
}
这意味着数据加载preety良好。该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);
之前，我不得不被加载很好的例子和图形的数据阵列，所以发生了什么在这里，为什么不显示？