Javascript Chart.js数据集控制器'；空'；绘制图表时

让我先道歉。我不是一名javascript/web开发人员，我甚至不声称自己拥有该语言的工作知识或对环境的良好掌握。我是一名嵌入式C/C++程序员，实际上我只学了足够的JS来完成这个小项目，但现在我被一个似乎让我无法理解的错误所困扰

我正在尝试编写一个绘图实用程序，我可以将JSON格式的按日期的性能数据插入其中，以提供与夜间构建/CI测试相关的性能历史视图；我们的目标是一眼就发现每天的绩效有任何倒退。我尝试获取chart.js line.html示例，并根据需要对其进行了修改。它主要起作用，只是当页面最初加载时，图表是空白的。但是，当我打开javascript控制台进行调试时，它会正确绘制/运行，但我看到以下错误： Chart.bundle.min.js:13未捕获类型错误：无法读取null（匿名函数）的属性“draw”

当我查看图表的配置数据时，数据集中的数据是正确的，但是，数据集的_meta字段中的“controller”对象为null，我认为这是导致错误的原因。我不知道该怎么办。也许我没有完全满足初始化dataset对象的要求，但我认为我已经完成了示例所做的一切。我想知道我是否无意中重写了对象的某些部分，或者这只是一个排序问题？我迷路了

编辑：我刚刚意识到，窗口的任何调整都会导致图表正确绘制。我认为打开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>

---

任何帮助或想法都将不胜感激。谢谢

尝试使用setTimeout将window.load函数中的代码包装在延迟内，如果它有效，那么您的假设可能是正确的，即在上下文存在之前触发draw函数。有解决办法！好主意。谢谢我仍然看到错误在3秒后弹出（我的超时值），因此问题似乎与排序有关，而不是与计时有关。事实证明，null _meta.controller对象和屏幕调整之前不绘制是两个不同的问题。我已经通过使用引导选项卡解决了屏幕大小调整问题，每个选项卡上都有一个图表，用于我不同的机器配置，并为每个选项卡设置了一个图表。如果我在“类”字段中设置“活动”，图表在调整大小之前不会正确绘制，但是如果没有它，图表会正确绘制。你能用它创建一个小提琴吗！我很想调试。我不确定这意味着什么，但我会调查一下。：）所以当我创建fiddle时，我没有可用的输入文件，这导致我重新构造了get_json_数据中的一些变量声明，您不知道吗，错误消失了。我没有弄清楚确切的根本原因，但现在情况好转了。我唯一剩下的问题是，第一个/活动选项卡上的图表在加载时仍然无法绘制。在将数据绘制到图表上之前，我必须调整选项卡的大小或强制对其进行其他更新。随便玩吧。

<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>

[
{
  "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"}
  ]
}
]