Question

我现在正在研究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）中工作正常，我只需更改上面的一些代码用法。

希望有人能帮助我找到错误，谢谢

Answer 1

几天后，我终于找到了chart.js的贡献者和成员。

他们帮助我并指出没有名为“area”的图表类型。

删除该部分后，代码工作正常。

调试消息没有显示相关信息，但与...无关的信息仍然很奇怪。

Answer 2

我遇到了类似的问题。查看源代码，似乎SampleCmpLevelZero是一个对象，其中包含所有不同类型的图表作为属性。 Chart.controllers是您在meta.type构造函数的选项哈希中以type传递的内容。所以在你的情况下，它抱怨new Chart()不是构造函数。

我很欣赏你已经找到了你的具体问题的答案，但我认为值得扩展，因为（a）正如你所指出的那样，调试信息本身就有点无益了，（b））这可能会帮助任何有类似困难的人（例如，在我的情况下，我放入“Line”而不是“line”，如果我理解错误信息实际上意味着它会为我节省一些时间）。

Chart.js使用错误（v2.4）

2 个答案: