javascript - Chart.JS TypeError : this. 比例未定义

Question

我只是想在从某些 PHP 收集的折线图上绘制一些基本的 X 和 Y 点。

在表单提交上，我做了一个 ajax post 来获取图表的点数。然后运行一个应该创建图形的 JS 函数。我不断收到“this.scale is undefined”并且图表没有显示/崩溃。

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

编辑:

这是在从帖子发回的 PHP 中设置的 JSON。 $dates 只是以下日期，与 $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);

返回 JSON 对象的 Ajax post

{
"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"]
}
]}

这与在线给你的示例格式相同，这就是为什么我很难弄清楚这一点

一旦我得到这些点，我就将它们发送到我的 js 函数 line_graph("cv",data) 来绘制直线，但这是它崩溃的地方。这对我来说没有意义，因为我是从文档中正确理解的。

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>"
});

}

如果我只是将数据硬编码到函数中，该图就可以工作，但显然那毫无值(value)。我真的已经尝试了我能想到的一切，所以我认为有人可能遇到了这个问题。它是一个简单的 ajax 获取数据然后显示令人讨厌的点，因为它是一个简单的过程。我知道我只是缺少一些东西，这是我第一次使用 chart.js

Answer 1

大约 2 天后我弄明白了。这很烦人，但我猜它是将 JSON 视为一个数组而不是它需要的对象。所以我对返回的数据做了一个 parseJson 并且它在图表中完美地工作......无论如何感谢你的帮助你告诉我这样做警报@potatopeelings 帮助我意识到 JSON 没有被正确读取。