Chart.JS TypeError：this.scale is undefined

我只是试图在一些从某些PHP收集的线图上绘制一些基本的X和Y点。Chart.JS TypeError：this.scale is undefined

在表单提交上，我做了一个ajax文章来获取图表的点数。然后运行一个应该创建图的JS函数。我不断收到“this.scale是未定义的”，图中没有显示任何内容/崩溃。

HTML 
<canvas id="cv" height="50"></canvas>

编辑：

这是JSON正在PHP设置正在从后发回。 $日期只是以下日期相同$ num_added是以下数据点。

$ds['labels'] = $dates; 
    $ds['datasets'][]=array('label' => $tid,'fillColor' => 'rgba(220,220,220,0.2)','strokeColor' =>'rgba(220,220,220,1)','pointColor' => 'rgba(220,220,220,1)','pointStrokeColor' => '#fff','pointHighlightFill' => '#fff','pointHighlightStroke' => 'rgba(220,220,220,1)','data' => $num_added); 
    print json_encode($ds);

阿贾克斯后，其在线返回

{ 
"labels":[ "2016-01-10","2016-01-12","2016-01-13","2016-01-14","2016-01-15","2016-01-16","2016-01-17","2016-01-18","2016-01-19","2016-01-21","2016-01-22","2016-01-24","2016-01-26","2016-01-27","2016-01-29","2016-01-30","2016-01-31","2016-02-01","2016-02-02","2016-02-03","2016-02-04","2016-02-05","2016-02-06","2016-02-07","2016-02-08","2016-02-10"], 
"datasets":[ 
{ 
    "label":"XYZ", 
    "fillColor":"rgba(220,220,220,0.2)", 
    "strokeColor":"rgba(220,220,220,1)", 
    "pointColor":"rgba(220,220,220,1)", 
    "pointStrokeColor":"#fff", 
    "pointHighlightFill":"#fff", 
    "pointHighlightStroke":"rgba(220,220,220,1)", 
    "data":["1483","2044","834","818","1215","1534","823","1368","3048","4808","4486","6488","1340","4260","1863","5309","1259","858","4041","7444","4514","3994","3574","1419","1383","1825"] 
} 
]}

JSON对象这是例相同的格式给你这就是为什么我在搞清楚了这一点

一旦我难倒得到我发送给我的js函数line_graph（“cv”，data）的点来绘制线条的图形，但这是它崩溃的地方。这对我来说没有意义，因为我从thr文档中得到了正确的结果。

function line_graph(holder, data){ 

Chart.defaults.global.animation = true; 
Chart.defaults.global.animationSteps = 60; 
Chart.defaults.global.animationEasing = "easeOutQuart"; 
Chart.defaults.global.showScale = true; 
Chart.defaults.global.scaleOverride = false; 
Chart.defaults.global.scaleLineColor ="rgba(0,0,0,.1)"; 
Chart.defaults.global.scaleLineWidth = 1; 
Chart.defaults.global.scaleShowLabels = true; 
Chart.defaults.global.scaleLabel = "<%=value%>"; 
Chart.defaults.global.scaleIntegersOnly = true; 
Chart.defaults.global.scaleBeginAtZero = false; 
Chart.defaults.global.scaleFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; 
Chart.defaults.global.scaleFontSize = 12; 
Chart.defaults.global.scaleFontStyle = "normal"; 
Chart.defaults.global.scaleFontColor = "#666"; 
Chart.defaults.global.responsive = true; 
Chart.defaults.global.maintainAspectRatio = true; 
Chart.defaults.global.showTooltips = true; 
Chart.defaults.global.tooltipEvents = ["mousemove", "touchstart", "touchmove"]; 
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)"; 
Chart.defaults.global.tooltipFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; 
Chart.defaults.global.tooltipFontSize = 14; 
Chart.defaults.global.tooltipFontStyle = "normal"; 
Chart.defaults.global.tooltipFontColor = "#fff"; 
Chart.defaults.global.tooltipTitleFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; 
Chart.defaults.global.tooltipTitleFontSize = 14; 
Chart.defaults.global.tooltipTitleFontStyle = "bold"; 
Chart.defaults.global.tooltipTitleFontColor = "#fff"; 
Chart.defaults.global.tooltipYPadding = 6; 
Chart.defaults.global.tooltipXPadding = 6; 
Chart.defaults.global.tooltipCaretSize = 8; 
Chart.defaults.global.tooltipCornerRadius = 6; 
Chart.defaults.global.tooltipXOffset = 10; 
Chart.defaults.global.tooltipTemplate = "<%if (label){%><%=label%>: <%}%><%= value %>"; 
Chart.defaults.global.multiTooltipTemplate = "<%= value %>"; 

var ctx = document.getElementById(holder).getContext("2d"); 
var myLineChart = new Chart(ctx).Line(data, { 
scaleShowGridLines : true, 
scaleGridLineColor : "rgba(0,0,0,.05)", 
scaleGridLineWidth : 1, 
scaleShowHorizontalLines: true, 
scaleShowVerticalLines: true, 
bezierCurve : true, 
bezierCurveTension : 0.4, 
pointDot : true, 
pointDotRadius : 4, 
pointDotStrokeWidth : 1, 
pointHitDetectionRadius : 20, 
datasetStroke : true, 
datasetStrokeWidth : 2, 
datasetFill : true, 
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
}); 

}

该图的工作原理是，如果我只是硬编码数据到函数中，但显然这是毫无价值的。我已经尝试了所有我能想到的东西，所以我认为有人可能会遇到这个问题。它是一个简单的Ajax来获取数据，然后显示令人讨厌的点，因为它是一个简单的过程。我知道我只是缺少这是我第一次与chart.js

来源

2016-02-10 workingxx

在函数的第一行中执行警报（data.datasets [0] .label）。如果您遇到错误，则说明您的JSON没有正确解释。 – potatopeelings

我觉得它是未定义的。我要上传我如何设置我的JSON。你认为你可以快速浏览一下吗？ – workingxx

也是数据未定义？因为你可能需要一些类似的东西'print（“var data =”。json_encode（$ ds））;' – potatopeelings

大约2天后我想通了。它非常讨厌，但我想它是把JSON看作一个数组而不是它需要的对象。所以我在返回的数据上做了一个parseJson，并且它完美地工作在图表上......任何方式感谢您的帮助，告诉我要做的是提醒@potatopeelings帮助我意识到JSON未被正确读取。

来源

2016-02-11 14:36:03 workingxx

Chart.JS TypeError：this.scale is undefined

回答

相关问题