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

回答

相關問題