Highcharts benutzerdefinierter Fehlerbehandler

Question

Wir verwenden Highcharts, um mehrere Diagramme auf einer einzelnen HTML-Seite zu plotten.

Allerdings eine/einige der Grafik werfen Highchart-Fehler und wir gerne diese Fehler zu erfassen und zeigen unterschiedliche Fehler für den Benutzer. Für diese Highcharts bieten benutzerdefinierte Fehlerbehandlung. Dieser benutzerdefinierte Fehlerhandler enthält jedoch keine Informationen zu einem bestimmten Diagramm, das diesen Fehler verursacht.

Hier, dass JS Fiddle von highcharts zur Verfügung gestellt, die für ein Diagramm funktioniert gut:

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/

Jede Idee, wie kann ich diese benutzerdefinierten Fehlerhandler pro Diagramm verwenden? Ich verwende neue Highcharts.Charts (Optionen), um ein neues Diagramm zu erstellen, sehe aber keine Möglichkeit, den Fehlerhandler für jedes Diagramm anzugeben.

Zusätzliche Informationen: Charts werden aufgefrischt/hängten Daten über APIs. Der Benutzer, der das Diagramm konfiguriert, konfiguriert auch das Aktualisierungsintervall und die Abfrage, die für das Diagramm verwendet werden sollen.

Answer 1

Fehlerbehandlung in HighCharts macht nicht viel Sinn. Es wäre sinnvoller, die Diagramminstanz an Highcharts.error zu übergeben (wie Kamil Kulig geschrieben hat) oder ein Ereignis error in chart.events zu haben.Anyways hier ist eine Lösung, die ich kam mit:

Erstellen Sie ein Array von Fehlern:

var chartErrors = []; 

einen Fehlerhandler erstellen, die Fehler in den chartErrors vorantreiben wird. Fehlerobjekte, die ich mache, sehen so aus: {"chartIndex": <chart index>, "errorCode": <error code>}. Alle Diagramme werden zum Array Highcharts.charts hinzugefügt, wenn sie erstellt werden, sodass wir Highcharts.charts.length - 1 für die chartIndex verwenden können.

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}); 
}; 

Nach dem Initiieren aller Diagramme werden wir eine Reihe von Fehlern haben. Wir können forEach für dieses Array aufrufen und Fehler so behandeln, wie wir es wollen.

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'); 
}); 

Arbeitsbeispiel:

Hinweis:ich den Code in einer selbst rufenden Funktion eingewickelt habe undichte Variablen zu globalem Bereich zu verhindern.

(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

Die Highcharts-Fehlerfunktion ist nicht darauf eingestellt, einen Diagrammkontext als Argument zu verwenden, da sie auch in anderen Kontexten ausgeführt werden kann.

Zum Beispiel: Fehlernummer 16 tritt auf, wenn Highcharts/Highstock zum zweiten Mal auf derselben Seite geladen wird. Es hat nichts mit dem Diagramm zu tun, da es nur vom Skript-Import abhängt.

Die Problemumgehung Ich fand, dass einige Suche und ein wenig Codierung benötigt.

Siehe diese Live-Demo: http://jsfiddle.net/kkulig/a8nun9aL/

ich die Stelle im Code verantwortlich für das Werfen des Fehlers 10 (die Sie in Ihrem Beispiel verwendet wird) gefunden. Ich überschrieb diese Funktion (siehe diese doc Seite für weitere Informationen über in Highcharts Überschreiben: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts) und hat eine chart Variable (von Highcharts.Axis.prototype.setTickInterval scope) als drittes Argument:

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 
    } 

Es sollte für alle Fehler gemacht werden Sie möchten benutzerdefinierte Handhabung. kann

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) 

    (...) 

Sie Ihr Eigentum in Diagramm Konstruktor Optionen und es in chart.options Objekt finden hinzufügen:

Nun kann es in benutzerdefinierten Highcharts.error Funktion verwendet werden.