图表绘制时Chart.js数据集控制器'null'

Question

让我提前道歉。我不是一个javascript / web开发人员，我甚至没有声称拥有该语言的工作知识或对环境的良好掌握。我是一名嵌入式C / C ++程序员，我实际上只学习了足够的JS来尝试完成这个小小的项目，但现在我陷入了一个似乎让我远远超出我的深度的错误。 / p>

我正在尝试编写一个图形实用程序，我可以将JSON格式的，按日期的性能数据插入到我的历史视图中，以便与我们的夜间构建/ CI测试相关联;目标是一目了然地确定每天的绩效回归。我试图采用chart.js line.html示例并对其进行修改以满足我的需求。它主要起作用，除了当页面最初加载时，图表是空白的。但是，当我打开javascript控制台进行调试时，它会正确绘制/运行，但是我看到了这个错误： Chart.bundle.min.js：13未捕获的TypeError：无法读取属性'draw'的null（匿名函数）

当我查看图表的配置数据时，数据集中的数据是正确的，但是，数据集的_meta字段中的“controller”对象为null，我认为这是导致错误的原因。我不知道该怎么做。也许我没有完全满足初始化数据集对象的要求，但我认为我已经做了样本所做的一切。我想知道是否可能无意中覆盖了对象的某些部分或者这只是一个排序的东西？我输了。

编辑：我刚刚意识到窗口的任何调整都会导致图表正确绘制。我认为打开javascript控制台使其纯粹由于主窗口的大小调整而起作用。当我在调整大小后在控制台中转储配置数据时，_meta.controller属性不再为null。也许我有一些测试搞砸了或需要延迟一些东西，但这似乎是一个很大的线索。在调整窗口大小后，它似乎正常运行100％。我仍然不知道从哪里去。

以下是代码：

<title>Line Chart</title>
<script src="https://code.jquery.com/jquery-1.10.2.js" charset=UTF-8></script>
<script src="Chart.js/dist/Chart.bundle.min.js"></script>
<style>
canvas{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>

在这里关闭头部和打开身体标签 - 似乎搞乱了代码文本框

<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>
<br>
<br>
<script>
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };
    var randomColor = function(opacity) {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
    };
    var get_json_data= function(){

      var my_labels = [], my_data = [];
      $.getJSON("perf_data.json", function(json){
      var insert_dataset = {'label': "Insert Performance", 'hidden': false, 'data': [], 'fill': true, 'borderDash': [5,5],
                            'borderColor': randomColor(0.4), 'backgroundColor': randomColor(0.5), 'pointBorderColor': randomColor(0.7),
                            'pointBackgroundColor': randomColor(0.5), 'pointBorderWidth': 1};
      var verify_dataset = {'label': "Verify Performance", 'hidden': false, 'data': [], 'fill': true, 'borderDash': [5,5],
                            'borderColor': randomColor(0.4), 'backgroundColor': randomColor(0.5), 'pointBorderColor': randomColor(0.7),
                            'pointBackgroundColor': randomColor(0.5), 'pointBorderWidth': 1};
      var update_dataset = {'label': "Update Performance", 'hidden': false, 'data': [], 'fill': true, 'borderDash': [5,5],
                            'borderColor': randomColor(0.4), 'backgroundColor': randomColor(0.5), 'pointBorderColor': randomColor(0.7),
                            'pointBackgroundColor': randomColor(0.5), 'pointBorderWidth': 1};
      var delete_dataset = {'label': "Delete Performance", 'hidden': false, 'data': [], 'fill': true, 'borderDash': [5,5],
                            'borderColor': randomColor(0.4), 'backgroundColor': randomColor(0.5), 'pointBorderColor': randomColor(0.7),
                            'pointBackgroundColor': randomColor(0.5), 'pointBorderWidth': 1};

      $.each(json, function (i, date_data) {
          //console.log(date_data);
          my_labels.push(date_data.datestamp);
          $.each(date_data.data, function(j, workload) {
            if (workload['op'] == "insert") {
              insert_dataset.data.push(parseFloat(workload.iops));
            } else if (workload['op'] == "verify" ) {
              verify_dataset.data.push(parseFloat(workload.iops));
            } else if (workload['op'] == "update" ) {
              update_dataset.data.push(parseFloat(workload.iops));
            } else if (workload['op'] == "delete" ) {
              delete_dataset.data.push(parseFloat(workload.iops));
           } else {
              console.log("Scomething went wrong w/ the data parsing.");
            }
          });
        });
        my_data.push(insert_dataset);
        my_data.push(verify_dataset);
        my_data.push(update_dataset);
        my_data.push(delete_dataset);
      })
    .fail(function (d, textStatus, error) {
      console.error("getJSON failed, status: " + textStatus + ", error: "+error)
      });
      return { "labels": my_labels , "datasets": my_data }; 
    };

    config = {};
    config['type'] = "line";
    config['data'] = get_json_data();
    config['options'] = {
            'responsive': true,
            'title':{
                'display':true,
                'text':'TOAD BVT performance'
            },
            'tooltips': {
                'mode': 'label',
                'callbacks': {
                    // beforeTitle: function() {
                    //     return '...beforeTitle';
                    // },
                    // afterTitle: function() {
                    //     return '...afterTitle';
                    // },
                    // beforeBody: function() {
                    //     return '...beforeBody';
                    // },
                    // afterBody: function() {
                    //     return '...afterBody';
                    // },
                    // beforeFooter: function() {
                    //     return '...beforeFooter';
                    // },
                    // footer: function() {
                    //     return 'Footer';
                    // },
                    // afterFooter: function() {
                    //     return '...afterFooter';
                    // },
                }
            }
          };
    config['hover'] = { 'mode': 'dataset' };
    config['scales'] = {
                'xAxes': [{
                    'display': true,
                    'scaleLabel': {
                        'show': true,
                        'labelString': 'Date'
                    }
                }],
                'yAxes': [{
                    'display': true,
                    'scaleLabel': {
                        'show': true,
                        'labelString': 'IOPS'
                    },
                    'ticks': {
                        'suggestedMin': 0,
                        'suggestedMax': 5000000
                    }
                }]
            };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };

</script>

这是我的JSON输入文件示例：

[
{
  "datestamp":"01/01/16",
   "data":[
      {"op":"insert", "iops":"83934.51429194942"},
      {"op":"verify", "iops":"15439.723320158104"},
      {"op":"update", "iops":"53198.20988023753"},
      {"op":"delete", "iops":"47994.31747281122"}
    ]
},
{
  "datestamp":"01/02/16",
  "data":[
      {"op":"insert", "iops":"84934.51429194942"},
      {"op":"verify", "iops":"14439.723320158104"},
      {"op":"update", "iops":"54198.20988023753"},
      {"op":"delete", "iops":"44994.31747281122"}
  ]
}
]

感谢任何帮助或想法。谢谢！