0
私は現在chart.js（V2.4）で作業していますが、いくつか問題があります。Chart.js使用エラー（v2.4）
似たような問題や質問がたくさんありましたが、私の問題を解決するものはありません。コンソールログで
エラーを示しています。
"Chart.controllersは[meta.type]コンストラクタではありません" ここに私のコードです：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<label style="margin-left:3%;">X : </label>
<select id="selectxfield" style="width:20%;margin-top:2%;margin-left:1%;display:inline;">
<option>player</option>
</select>
<label style="margin-left:3%;">Y : </label>
<select name="selectyfield" style="width:20%;margin-left:1%;display:inline;">
<option>ppg</option>
</select>
<button id="btnchart" style="margin-left:3%;">Submit</button>
<canvas id="areaChart" style="height:250px"></canvas>
<canvas id="lineChart" style="height:250px"></canvas>
<canvas id="barChart" style="height:250px"></canvas>
</body>
<script type="text/javascript">
$(function() {
// This will get the first returned node in the jQuery collection.
function isEmpty(obj){
for(var key in obj){
if(obj.hasOwnProperty(key))
return false;
}
return true;
}
function randomColor() {
var colorVal = "rgb(";
for(i = 0; i < 3; i++) {
colorVal += Math.round(250*Math.random());
if (i < 2) {
colorVal += ",";
}
}
colorVal += ")";
return colorVal;
}
$('#btnchart').click(function(){
var jsdata = '{"name": "2011NBA.csv", "resource_id": "pao3ckw7b3lj8eh4ad0899oiy", "success": "true", "records": [{"id": 1, "player": "LeBron James", "division": "East", "ppg": "27.1", "rpg": "7.9", "apg": "6.2", "blk": "0.81", "stl": "1.85"}, {"id": 2, "player": "Kevin Durant", "division": "West", "ppg": "28", "rpg": "8", "apg": "3.5", "blk": "1.17", "stl": "1.33"}, {"id": 3, "player": "Dwight Howard", "division": "East", "ppg": "20.6", "rpg": "14.5", "apg": "1.9", "blk": "2.15", "stl": "1.5"}, {"id": 4, "player": "Christ Paul", "division": "West", "ppg": "19.8", "rpg": "3.6", "apg": "9.1", "blk": "0.07", "stl": "2.53"}, {"id": 5, "player": "Derrick Rose", "division": "East", "ppg": "21.8", "rpg": "3.4", "apg": "7.9", "blk": "0.72", "stl": "0.9"}]}'
var data = JSON.parse(jsdata);
var x = []; // use array to save the field's name
var y = []; // use array to save data
var xf = $("#selectxfield option:selected").text();// get selected value
$.each(data.records, function(i, v) {
x.push(v[xf]);
});
var areaChartData = {
labels: x,
datasets: []
};
var selectyfield = document.getElementsByName('selectyfield') // selectyfield can be added dynamically in my code, but I set it to one just for debug convenience
var dt = data.records;
for (j=0;j<selectyfield.length;j++){
var color = randomColor();
var index = selectyfield[j].selectedIndex;
var k = selectyfield[j].options[index].text;
$.each(data.records, function(ky, vl) {
y.push(parseFloat(vl[k]));
});
if (isEmpty(data.records)){
$.each(dt, function(ky, vl) {
y.push(parseFloat(vl[k]));
});
}
var data ={
label: k,
fillColor: color,
strokeColor: color,
pointColor: color,
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: y
}
areaChartData["datasets"].push(data);
y = [];
}
var areaChartOptions = {
// a lot of options
};
var barChartOptions = {
// a lot of options
};
var area = document.getElementById("areaChart")
var areaChartCanvas = area.getContext("2d");
var areaChart = new Chart(areaChartCanvas,{
type: "area",
data: areaChartData,
options: areaChartOptions
});
var line = document.getElementById("lineChart")
var lineChartCanvas = line.getContext("2d");
var lineChartOptions = areaChartOptions;
var lineChartData = areaChartData;
lineChartOptions.datasetFill = false;
var lineChart = new Chart(lineChartCanvas,{
type: "line",
data: lineChartData,
options: lineChartOptions
});
var bar = document.getElementById("barChart")
var barChartCanvas = bar.getContext("2d");
var barChartData = areaChartData;
barChartOptions.datasetFill = false;
var lineChart = new Chart(barChartCanvas,{
type: "bar",
data: barChartData,
options: barChartOptions
});
});
});
</script>
</html>
選択フィールドは、単に便宜のために固定されているが。
古いchart.js（v1.X）でコードが正常に機能することは確かですが、上のコードの使用方法を変更するだけです。誰かがエラーを見つける私を助けることができる
希望、感謝