Highcharts 自定义错误处理程序

Question

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

但是，一个/一些图表会引发 highchart 错误，我们希望捕获这些错误并向用户显示不同的错误。 为此，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/

知道如何在每个图表中使用此自定义错误处理程序吗？ 我正在使用 new Highcharts.Charts(options) 创建新图表，但看不到为每个图表指定错误处理程序的方法。

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

Answer 1

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>

Answer 2

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

例如：在同一页面中第二次加载 Highcharts/Highstock 时出现错误编号 16。它与图表无关，因为它仅依赖于脚本导入。

解决方法我发现需要一些搜索和一些编码。

请参阅此现场演示：http://jsfiddle.net/kkulig/a8nun9aL/

我在代码中找到了引发错误 10（您在示例中使用的那个）的位置。我重写了这个函数（有关在 Highcharts 中重写的更多信息，请参阅这个 doc 页面：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 对象中找到它。