图表Js无法读取未定义属性的“长度”。
图表Js无法读取未定义属性的“长度”。
提问于 2016-04-15 14:53:19
使用图表js，我试图从Ajax调用中提取数据以提供给图表。我发现了一些其他的帖子，人们建议推迟画布负载，但似乎没有什么效果。目前，这是我下面的内容和我得到的错误
$(function () {
GetChartData();
function GetChartData() {
$.ajax({
url: ajaxURL,
method: 'GET',
dataType: 'json',
success: function (d) {
//-------------
//- BAR CHART -
//-------------
var barChartData = d;
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
// console.log(datajson);
//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,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>",
//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: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
}
});
}
});更新这里展示了非AJAX是如何工作的
下面的代码是获取Ajax get请求的结果(我是从将它转储到控制台中获得的)，并创建了相同的“硬编码”版本。技术上唯一不同的是，一个页面加载了数据，第二个页面加载了很短时间的数据。
var chartData = {
"labels": [
"April"
],
"datasets": [
{
"label": "Not Sure What to Put Here",
"fillColor": "#662B60",
"strokeColor": "#662B60",
"pointColor": "#662B60",
"pointStrokeColor": "#662B60",
"pointHighlightFill": "#662B60",
"pointHighlightStroke": "#662B60",
"data": [
1
]
},
{
"label": "Not Sure What to Put Here",
"fillColor": "#88B56E",
"strokeColor": "#88B56E",
"pointColor": "#88B56E",
"pointStrokeColor": "#88B56E",
"pointHighlightFill": "#88B56E",
"pointHighlightStroke": "#88B56E",
"data": [
1
]
},
{
"label": "Not Sure What to Put Here",
"fillColor": "#48CA2B",
"strokeColor": "#48CA2B",
"pointColor": "#48CA2B",
"pointStrokeColor": "#48CA2B",
"pointHighlightFill": "#48CA2B",
"pointHighlightStroke": "#48CA2B",
"data": [
0.83
]
}
]
};
//-------------
//- BAR CHART -
//-------------
var barChartData = chartData;
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
//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,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>",
//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: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);更新--我将chart.js的最小版本更改为完整的版本，这样我就可以看到它到底在哪里出错。
这是来自铬控制台的图像
回答 7
Stack Overflow用户
回答已采纳
发布于 2016-04-15 17:24:19
找到答案了
Ajax结果必须首先进行分析。
结果修正
var barChartData = JSON.parse(d);Stack Overflow用户
发布于 2017-02-13 21:27:47
问题是，当代码执行时，还没有创建画布。您应该将代码包装在函数中，并将该函数分配给window.onload事件。您可以看到下面的示例代码。
window.onload = function() {
var ctx = document.getElementById("myChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "2015",
data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
}]
}
})
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
Stack Overflow用户
发布于 2016-11-23 12:34:54
对于有此问题的其他用户，在调用时，请确保容器画布元素存在。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36650455
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号