工作示例：

Question

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

然而，一个/一些图表抛出了高图误差，我们想捕获这些错误并向用户显示不同的错误。对于此highcharts，请提供自定义错误处理程序。但是，此自定义错误处理程序不提供有关抛出该错误的特定图表的信息。

这里的JS Fiddle由highcharts提供，适用于图表：

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使用数据刷新/追加图表。配置图表的用户还配置刷新间隔和用于图表的查询。

Answer 1

不调整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对象中找到它。

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自定义错误处理程序

2 个答案:

工作示例：