admin管理员组文章数量:1322012
I am following the Chartjs documentation and have two arrays (labels & datasets) within my data object and it appears that when I try to define properties within the dataset array, I am running into an error message, Uncaught TypeError: Cannot read property 'datasets' of undefined
, and haven't been able to figure out why. The information accurately matches the documentation, but for some reason it isn't working.
HTML:
<!doctype html>
<html>
<head>
<title>Google Super Proxy Test</title>
<script src="Chart.min.js"></script>
<script src="chart-options.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="sessions-graph" height="450" width="600"></canvas>
</div>
</body>
</html>
charts-options.js
window.onload = function(){
// Get the context of the canvas element
var ctx = document.getElementById("sessions-graph").getContext("2d");
var sessionsGraph = new Chart(ctx).Bar(data); //Create a chart with "data" array
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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: [65, 59, 80, 81, 56, 55, 40]
}
]
};
Chart.defaults.global = {
//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 - 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
}
}
I am following the Chartjs documentation and have two arrays (labels & datasets) within my data object and it appears that when I try to define properties within the dataset array, I am running into an error message, Uncaught TypeError: Cannot read property 'datasets' of undefined
, and haven't been able to figure out why. The information accurately matches the documentation, but for some reason it isn't working.
HTML:
<!doctype html>
<html>
<head>
<title>Google Super Proxy Test</title>
<script src="Chart.min.js"></script>
<script src="chart-options.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="sessions-graph" height="450" width="600"></canvas>
</div>
</body>
</html>
charts-options.js
window.onload = function(){
// Get the context of the canvas element
var ctx = document.getElementById("sessions-graph").getContext("2d");
var sessionsGraph = new Chart(ctx).Bar(data); //Create a chart with "data" array
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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: [65, 59, 80, 81, 56, 55, 40]
}
]
};
Chart.defaults.global = {
//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 - 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
}
}
Share
Improve this question
asked Aug 26, 2014 at 16:44
cphillcphill
5,92418 gold badges102 silver badges194 bronze badges
1
-
2
You're using
data
before you assign it! – Barmar Commented Aug 26, 2014 at 16:47
1 Answer
Reset to default 7You have to assign data
before you pass it to the function:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var sessionsGraph = new Chart(ctx).Bar(data); //Create a chart with "data" array
You probably should also assign Chart.default.global
before calling it, but I'm not sure when that's used.
本文标签: javascriptTypeError Not reading property correctlyStack Overflow
版权声明:本文标题:javascript - TypeError Not reading property correctly - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742114154a2421389.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论