Highchart-Diagramm mit Fehlerbalken aus CSV

Question

Ich möchte Balkendiagramme mit Highcharts erstellen, die Daten aus einer aus Excel exportierten CSV verwenden. Die Beispiele, die ich vom Datenmodul gesehen habe, scheinen gut zu funktionieren, aber wie könnte ich Fehlerbalkenserien und andere Informationen hinzufügen (wie zum Beispiel eine spezielle Punktnotiz oder Farbe)?

stelle ich hier eine jsFiddle up: http://jsfiddle.net/jmunger/z3oeu2aa/1/

Der erste Chart einfache CSV-Daten verwendet.

Das zweite Diagramm enthält komplexere CSV-Daten mit Spalten für den unteren und oberen Fehlerbalken und Spalten für einen bestimmten Datenpunkt.

<pre id="csv2" style="display: none">Year, Grade 1, Grade 1 Low, Grade 1 High, Grade 1 Note, Grade 2, Grade 2 Low, Grade 2 High,Grade 2 Note, Grade 3, Grade 3 Low, Grade 3 High, Grade 3 Note 
 
2010-2011,1,0,2,999,2,1,4,,5,4,6,999 
 
2012-2013,1,0,2,999,2,1,4,,5,4,6,999 
 
2014-2015,1,0,2,999,2,1,4,,5,4,6,999</pre>

Offensichtlich ist die zweite Grafik zu diesem Zeitpunkt nicht funktioniert, da alle Spalten eine regelmäßige Serie erstellen.

Gibt es eine Möglichkeit, mit dem Datenmodul eine solche CSV-Datei zu verarbeiten - zumindest teilweise?

Die Struktur der CSV-Datei kann bei Bedarf geändert werden.

Answer 1

Es gibt ein Problem mit Datenmodul, habe ich ein Beispiel mit Abhilfe mit data.seriesMapping

Highcharts.setOptions({ 
 
    chart: { 
 
    \t events: { 
 
    \t load() { 
 
     \t this.series.forEach((s) => { 
 
     \t // Workaround for data module problem 
 
      if (s.name === 'Year') { 
 
      \t s.update({data: [], visible: false, showInLegend: false}) 
 
      } 
 
     }) 
 
     } 
 
    }, 
 
    type: 'column', 
 
    backgroundColor: '#F0F0F8', 
 
    shadow: true 
 
    } 
 
}) 
 

 
$('#container1').highcharts({ 
 
    data: { 
 
    csv: document.getElementById('csv2').innerHTML, 
 
\t \t seriesMapping: [ 
 
    \t { x: 0, y: 1, name: 1 }, 
 
     { x: 0, y: 5, name: 5 }, 
 
     { x: 0, y: 5, name: 5 }, 
 
     { x: 0, y: 9, name: 9 }, 
 
     { name: 0 }, { name: 0 }, { name: 0 }, { name: 0 }, { name: 0 } // Workaround for data module problem 
 
    ] 
 
    }, 
 
    title: { 
 
    text: 'Complex CSV data' 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/data.js"></script> 
 
<div id="container1"></div> 
 

 
<pre id="csv2" style="display: none">Year, Grade 1, Grade 1 Low, Grade 1 High, Grade 1 Note, Grade 2, Grade 2 Low, Grade 2 High,Grade 2 Note, Grade 3, Grade 3 Low, Grade 3 High, Grade 3 Note 
 
2010-2011,1,0,2,999,2,1,4,0,5,4,6,999 
 
2012-2013,1,0,2,999,2,1,4,0,5,4,6,999 
 
2014-2015,1,0,2,999,2,1,4,0,5,4,6,999</pre>

anschauliches Beispiel: http://jsfiddle.net/p8hbwzx0/