Uncaught TypeError: Cannot read property 'label' of undefined when No Data In Graphs
Uncaught TypeError: Cannot read property 'label' of undefined when No Data In Graphs
错误:
morris.min.js:6 Uncaught TypeError: Cannot read property 'label' of undefined
at d.b.Bar.d.hoverContentForRow (morris.min.js:6)
at d.b.Bar.d.onHoverMove (morris.min.js:6)
at morris.min.js:6
at d.b.EventEmitter.a.fire (morris.min.js:6)
at HTMLDivElement.<anonymous> (morris.min.js:6)
at HTMLDivElement.dispatch (jquery.min.js?v=1.6.10:3)
at HTMLDivElement.r.handle (jquery.min.js?v=1.6.10:3)
- 当图表中的数据为空时出现错误。
- 我该如何解决这个问题
错误是条形图
js代码
var httpRequest = $http({
method: 'GET',
url: root_url,
}).success(function(json3, status) {
$scope.res3 = json3.data;
Morris.Bar({
element: 'chart_priority',
data: json3.data, // use returned data to plot the graph,
xkey: 'priority',
ykeys: ['value'],
labels: ['Logs'],
hideHover: 'auto',
resize: true,
//
});
});
morris js 抛出错误
d.prototype.hoverContentForRow = function(a) {
var b, c, d, e, f, g, h, i;
for (d = this.data[a],
b = "<div class='morris-hover-row-label'>" + d.label + "</div>",
i = d.y,
c = g = 0,
h = i.length; h > g; c = ++g)
f = i[c],
b += "<div class='morris-hover-point' style='color: " + this.colorFor(d, c, "label") + "'>\n " + this.options.labels[c] + ":\n " + this.yLabelFormat(f) + "\n</div>";
return "function" == typeof this.options.hoverCallback && (b = this.options.hoverCallback(a, this.options, b, d.src)),
e = this.left + (a + .5) * this.width / this.data.length,
[b, e]
}
,
解决方案我需要如何解决 morris js 中标签未定义的问题。
当某些 ajax 调用的数据为空时。
解决方法我也试过了
There are few more things here.
让我们来看看下面的事件时间表。
第一次 Morris.Line 通过 ajax 使用正确的 .data 呈现
第二次,数据对象为空时,Chart完全不可用
第三次,当我们通过 ajax 在同一张图表上渲染数据时。什么都没发生。
就像你建议的那样,我可以在 UI 中处理它。每个实施或遇到这种情况的人都必须自己实施这个占位符消息。相反,如果我们可以在图书馆本身处理它,那么每个人都可以从中受益,图书馆也更具防御性。
让我们使用占位符方法
第一次,Morris.Line 使用来自 ajax 的数据呈现
第二次,数据为空。而不是调用 .setData() 隐藏 div 元素,即 Morris 的 rendered/managed 并使用 span 显示占位符消息。
第三次,当数据正确时,移除 span 并重新渲染 Morris.Line
我建议在库本身中实现此功能,以便库对此类运行时问题更具防御性。
对我有用的解决方案
method: 'GET',
url: root_url
}).success(function (json3, status) {
$scope.res3 = json3.data;
if(json3.length==0 ||json3.data==undefined)
{
// alert("data undefined");
$("#chart_priority").parent().attr("class","hide");
$("#prioritys").hide();
var priority_graph=[ { label:"Logs", value:0 } ];
}
else
{
$("#chart_priority").parent().attr("class","show");
var priority_graphs=json3.data;
}
Morris.Bar({
element: 'chart_priority',
data:json3.data?priority_graphs:priority_graph,
//data:json3.data,
label:'Logs',
xkey: 'priority',
ykeys: ['value'],
labels: ['Logs'],
});
错误:
morris.min.js:6 Uncaught TypeError: Cannot read property 'label' of undefined
at d.b.Bar.d.hoverContentForRow (morris.min.js:6)
at d.b.Bar.d.onHoverMove (morris.min.js:6)
at morris.min.js:6
at d.b.EventEmitter.a.fire (morris.min.js:6)
at HTMLDivElement.<anonymous> (morris.min.js:6)
at HTMLDivElement.dispatch (jquery.min.js?v=1.6.10:3)
at HTMLDivElement.r.handle (jquery.min.js?v=1.6.10:3)
- 当图表中的数据为空时出现错误。
- 我该如何解决这个问题
错误是条形图
js代码
var httpRequest = $http({
method: 'GET',
url: root_url,
}).success(function(json3, status) {
$scope.res3 = json3.data;
Morris.Bar({
element: 'chart_priority',
data: json3.data, // use returned data to plot the graph,
xkey: 'priority',
ykeys: ['value'],
labels: ['Logs'],
hideHover: 'auto',
resize: true,
//
});
});
morris js 抛出错误
d.prototype.hoverContentForRow = function(a) {
var b, c, d, e, f, g, h, i;
for (d = this.data[a],
b = "<div class='morris-hover-row-label'>" + d.label + "</div>",
i = d.y,
c = g = 0,
h = i.length; h > g; c = ++g)
f = i[c],
b += "<div class='morris-hover-point' style='color: " + this.colorFor(d, c, "label") + "'>\n " + this.options.labels[c] + ":\n " + this.yLabelFormat(f) + "\n</div>";
return "function" == typeof this.options.hoverCallback && (b = this.options.hoverCallback(a, this.options, b, d.src)),
e = this.left + (a + .5) * this.width / this.data.length,
[b, e]
}
,
解决方案我需要如何解决 morris js 中标签未定义的问题。
当某些 ajax 调用的数据为空时。
解决方法我也试过了
There are few more things here.
让我们来看看下面的事件时间表。
第一次 Morris.Line 通过 ajax 使用正确的 .data 呈现 第二次,数据对象为空时,Chart完全不可用 第三次,当我们通过 ajax 在同一张图表上渲染数据时。什么都没发生。 就像你建议的那样,我可以在 UI 中处理它。每个实施或遇到这种情况的人都必须自己实施这个占位符消息。相反,如果我们可以在图书馆本身处理它,那么每个人都可以从中受益,图书馆也更具防御性。
让我们使用占位符方法
第一次,Morris.Line 使用来自 ajax 的数据呈现 第二次,数据为空。而不是调用 .setData() 隐藏 div 元素,即 Morris 的 rendered/managed 并使用 span 显示占位符消息。 第三次,当数据正确时,移除 span 并重新渲染 Morris.Line 我建议在库本身中实现此功能,以便库对此类运行时问题更具防御性。
对我有用的解决方案
method: 'GET',
url: root_url
}).success(function (json3, status) {
$scope.res3 = json3.data;
if(json3.length==0 ||json3.data==undefined)
{
// alert("data undefined");
$("#chart_priority").parent().attr("class","hide");
$("#prioritys").hide();
var priority_graph=[ { label:"Logs", value:0 } ];
}
else
{
$("#chart_priority").parent().attr("class","show");
var priority_graphs=json3.data;
}
Morris.Bar({
element: 'chart_priority',
data:json3.data?priority_graphs:priority_graph,
//data:json3.data,
label:'Logs',
xkey: 'priority',
ykeys: ['value'],
labels: ['Logs'],
});