Javascript Chart.JS TypeError:this.scale未定义
我只是试图在从一些PHP收集的线图上绘制一些基本的X和Y点 在一个表单提交中,我做了一个ajax帖子来获取图表的点数。然后运行一个JS函数,该函数将创建图形。我一直得到“this.scale未定义”,而图表中没有显示任何内容/崩溃Javascript Chart.JS TypeError:this.scale未定义,javascript,php,chart.js,Javascript,Php,Chart.js,我只是试图在从一些PHP收集的线图上绘制一些基本的X和Y点 在一个表单提交中,我做了一个ajax帖子来获取图表的点数。然后运行一个JS函数,该函数将创建图形。我一直得到“this.scale未定义”,而图表中没有显示任何内容/崩溃 HTML <canvas id="cv" height="50"></canvas> 返回 { "labels":[ "2016-01-10","2016-01-12","2016-01-13","2016-01-14","2016-01-
HTML
<canvas id="cv" height="50"></canvas>
返回
{
"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)来绘制这条线,但这就是它崩溃的地方。这对我来说毫无意义,因为我是从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>"
});
}
功能线图(支架、数据){
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=“”;
Chart.defaults.global.scaleIntegersOnly=true;
Chart.defaults.global.scaleBeginAtZero=false;
Chart.defaults.global.scaleFontFamily=“'Helvetica Neue'、'Helvetica'、'Arial',无衬线”;
Chart.defaults.global.scaleFontSize=12;
Chart.defaults.global.scaleFontStyle=“正常”;
Chart.defaults.global.scaleFontColor=“#666”;
Chart.defaults.global.responsive=true;
Chart.defaults.global.MaintaintAspectratio=true;
Chart.defaults.global.showTooltips=true;
Chart.defaults.global.ToolTipeEvents=[“mousemove”、“touchstart”、“touchmove”];
Chart.defaults.global.tooltipFillColor=“rgba(0,0,0,0.8)”;
Chart.defaults.global.tooltipFontFamily=“'Helvetica Neue','Helvetica','Arial',无衬线”;
Chart.defaults.global.tooltipFontSize=14;
Chart.defaults.global.tooltipFontStyle=“正常”;
Chart.defaults.global.tooltipFontColor=“#fff”;
Chart.defaults.global.tooltiptitlefonfamily=“'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.ToolTiptTemplate=“:”;
Chart.defaults.global.multiTooltipTemplate=“”;
var ctx=document.getElementById(holder.getContext(“2d”);
var myLineChart=新图表(ctx).Line(数据{
scaleShowGridLines:对,
scaleGridLineColor:“rgba(0,0,0,05)”,
scaleGridLineWidth:1,
缩放水平线:对,
scaleShowVerticalLines:没错,
贝塞尔曲线:对,
Bezier曲线长度:0.4,
是的,
点半径:4,
pointDotStrokeWidth:1,
PointHit检测半径:20,
datasetStroke:对,
datasetStrokeWidth:2,
datasetFill:true,
legendTemplate:“
”
});
}
如果我只是将数据硬编码到函数中,那么这个图就可以工作,但显然这是毫无价值的。我已经尝试了我能想到的一切,所以我想可能有人遇到了这个问题。这是一个简单的ajax来获取数据,然后显示点,这很烦人,因为这是一个简单的过程。我知道我只是错过了一些东西,这是我第一次使用chart.js,大约两天后我就明白了。这很烦人,但我猜它是把JSON看作一个数组,而不是它所需要的对象。因此,我对返回的数据进行了一次JSON解析,它完美地融入到了图形中……无论如何,感谢您的帮助,您告诉我这样做,alert@potatopeelings帮助我意识到JSON没有被正确读取。在函数的第一行执行一次alert(data.datasets[0].label)。如果你得到一个错误,你没有正确地解释你的JSON。我知道它是未定义的。我将上传如何设置JSON。你认为你可以看一下吗?数据也没有定义吗?因为您可能需要某种类型的
print(“var data=“.json_encode($ds))代码>没有数据是正常的。这是从帖子返回的JSON。但是它一直在说。数据集是未定义的,这让我觉得创建对象的php有问题
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>"
});
}