让我提前道歉。我不是 javascript/web 开发人员，我什至不声称拥有该语言的工作知识或对环境的良好掌握。我是一名嵌入式 C/C++ 程序员，实际上我只学习了足够的 JS 来尝试完成这个小项目，但现在我陷入了一个似乎让我无法深入的错误。
我正在尝试编写一个图形实用程序，我可以将 JSON 格式的按日期性能数据插入其中，以提供与我们的夜间构建/CI 测试相关的性能历史 View ；目标是一目了然地识别每天的任何性能回归。我尝试获取 chart.js line.html 示例并对其进行修改以满足我的需要。它主要工作，除了当页面最初加载时，图表是空白的。但是，当我打开 javascript 控制台进行调试时，它会正确绘制/运行，但我看到此错误:
Chart.bundle.min.js:13 Uncaught TypeError: Cannot read property 'draw' of null(anonymous function)
当我查看图表的配置数据时，数据集中的数据是正确的，但是，数据集的 _meta 字段中的“ Controller ”对象为空，我认为这是导致错误的原因。我不知道该怎么办。也许我没有完全满足初始化数据集对象的要求，但我认为我已经完成了示例所做的一切。我想知道我是否无意中覆盖了对象的某些部分，或者这只是一个排序的事情？我迷路了。
编辑:我刚刚意识到任何调整窗口大小都会导致正确绘制图表。我认为打开 javascript 控制台使其工作纯粹是由于调整了主窗口的大小。当我在调整大小后在控制台中转储配置数据时，_meta.controller 属性不再为空。也许我有一些排序搞砸了或者需要延迟一些东西，但这似乎是一个很大的线索。调整窗口大小后，它似乎 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>
在这里关闭头部并打开 body 标签 - 似乎弄乱了代码文本框
<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"}
]
}
]
任何帮助或想法表示赞赏。谢谢!
最佳答案
我有一个类似的案例。我使用了第一个 js 文件中的配置，以及在第二个 js 文件中创建图表的代码。绘制图表后，出现错误:“ Controller 为空”。我通过“扩展”方法进行深度复制解决了这个问题(但我使用了 JQuery)。
第一个文件中的默认构造函数:
const standart_chart = {
type: 'bar',
options: {},
...
}
var ctx = $('#chart');
var chart = jQuery.extend(true, {}, standart_chart);
chart.data = barChartData;
var chart_obj = new Chart(ctx, chart);
关于javascript - Chart.js 数据集 Controller 'null' 绘制图表时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37551614/