我们使用highcharts在一个HTML页面上绘制多个图表。
然而，其中一个/一些图表抛出了highchart错误，我们喜欢捕捉这些错误并向用户显示不同的错误。为此，请提供自定义错误处理程序。但是这个自定义错误处理程序不提供有关引发该错误的特定图表的信息。
这里是由highcharts提供的JS Fiddle，它适用于图表：
Highcharts.error = function (code, true) {
// See
https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
Highcharts.charts[0].renderer
.text('Chart error ' + code)
.attr({
fill: 'red',
zIndex: 20
})
.add()
.align({
align: 'center',
verticalAlign: 'middle'
}, null, 'plotBox');
};
http://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/highcharts-error/
你知道我如何在每个图表中使用这个自定义错误处理程序吗？我正在使用新的Highcharts.Charts(选项)来创建新的图表，但不知道如何为每个图表指定错误处理程序。
其他信息：通过API使用数据刷新/附加图表。配置图表的用户还配置要用于图表的刷新间隔和查询。
HighCharts中的错误处理没有多大意义。将图表实例传递给Highcharts.error(就像Kamil Kulig所写的那样)或在chart.events中有一个error事件会更有意义。无论如何这是我想出的一个解决方案：
创建错误数组：
var chartErrors = [];
创建一个错误处理程序，将错误推送到chartErrors中。我正在制作的错误对象如下：{"chartIndex": <chart index>, "errorCode": <error code>}。所有图表在创建时都会添加到Highcharts.charts数组中，因此我们可以将Highcharts.charts.length - 1用于chartIndex。
Highcharts.error = function (code) {
// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
chartErrors.push({"chartIndex": Highcharts.charts.length - 1, "errorCode":code});
};
启动所有图表后，我们将出现一系列错误。我们可以在这个数组上调用forEach，并按照我们想要的方式处理错误。
chartErrors.forEach(function(c) {
Highcharts.charts[c.chartIndex].renderer
.text('Chart error ' + c.errorCode)
.attr({
fill: 'red',
zIndex: 20
})
.add()
.align({
align: 'center',
verticalAlign: 'middle'
}, null, 'plotBox');
});
工作示例：
注意：我已经将代码封装在一个自调用函数中，以防止变量泄漏到全局范围
(function() {
var chartErrors = [];
Highcharts.error = function (code) {
// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
chartErrors.push({"chartIndex": Highcharts.charts.length - 1, "errorCode":code});
};
Highcharts.chart('container1', {
title: {
text: 'Demo of Highcharts error handling'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
type: 'logarithmic',
min: 0
},
series: [{
data: [1, 3, 2],
type: 'column'
}]
});
Highcharts.chart('container2', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container3', {
title: {
text: 'Demo of Highcharts error handling'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
type: 'logarithmic',
min: 0
},
series: [{
data: [1, 3, 2],
type: 'column'
}]
});
chartErrors.forEach(function(e) {
Highcharts.charts[e.chartIndex].renderer
.text('Chart error ' + e.errorCode)
.attr({
fill: 'red',
zIndex: 20
})
.add()
.align({
align: 'center',
verticalAlign: 'middle'
}, null, 'plotBox');
});
})();<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 400px"></div>Highcharts错误函数没有调整为将图表上下文作为参数，因为它也可以在不同的上下文中执行。
例如：在同一页面中第二次加载Highcharts/Higstock时，会出现错误编号16。它与图表无关，因为它只依赖于脚本导入。
我找到的解决方法需要一些搜索和一些编码。
请参阅现场演示：http://jsfiddle.net/kkulig/a8nun9aL/
我在代码中找到了引发错误10的位置(您在示例中使用的位置)。我覆盖了此函数(有关Highcharts中覆盖的更多信息，请参阅文档页面：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts)并添加了一个chart变量(来自Highcharts.Axis.prototype.setTickInterval范围)作为第三个自变量：
if (
axis.positiveValuesOnly &&
!secondPass &&
Math.min(axis.min, pick(axis.dataMin, axis.min)) <= 0
) { // #978
H.error(10, 1, chart); // Can't plot negative values on log axis // MODIFIED LINE
}
应该为您想要自定义处理的所有错误执行此操作。
现在它可以用于自定义Highcharts.error功能：
Highcharts.error = function(code, stop, chart) {
// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
Highcharts.charts[0].renderer
.text('Chart error ' + code + " on chart titled: " + chart.title.textStr)
(...)
您可以在图表构造函数选项中添加自己的属性，并在chart.options对象中找到它。