高图自定义错误处理程序

Question

我们使用高图表在单个超文本标记语言页面上绘制多个图表。

然而，一个/一些图表抛出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/

知道如何使用每个图表的自定义错误处理程序吗？我正在使用新的Highcharts。图表（选项）来创建新的图表，但看不到为每个图表指定错误处理程序的方法。

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

Answer 1

匿名用户

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

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

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

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

我在代码中找到了负责抛出错误10的位置（您在示例中使用的位置）。我覆盖了这个函数（有关在高图：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts中覆盖的更多信息，请参阅此文档页面）并添加了一个图表变量（来自高图。xis.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 = 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更有意义。错误（如Kamil Kulig所写）或在图表中出现错误事件。事件。无论如何，我提出了一个解决方案：

创建一个错误数组：

var chartErrors = [];

创建一个错误处理程序，将错误推入错误。我正在创建的错误对象如下所示：{“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>