Highcharts 自定义错误处理程序

Question

我们正在使用 highcharts 在单个 HTML 页面上绘制多个图表。

但是图表的 one/some 抛出高图错误，我们喜欢捕获这些错误并向用户显示不同的错误。为此，highcharts 确实提供了自定义错误处理程序。但是此自定义错误处理程序不提供有关抛出该错误的特定图表的信息。

这里是 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(options) 创建新图表，但看不到为每个图表指定错误处理程序的方法。

其他信息： 图表 refreshed/appended 通过 API 使用数据。配置图表的用户还配置刷新间隔和查询以用于图表。

Answer 1

Highcharts 错误函数未调整为将图表上下文作为参数，因为它也可以在不同的上下文中执行。

例如：在同一页面中第二次加载Highcharts/Highstock时出现错误号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 对象中找到它。

Answer 2

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 custom error handler

error-handling

charts

highcharts

custom-error-handling

工作示例：