Wie zu formatieren, meine json Daten für Stapel-Säulendiagramm in HighCharts

Hier mein json-Daten

var data = [
    {"unit":"a", "status":"Stopped /Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped /Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];

unit ist die Kategorie

Ich möchte die Daten werden formatiert in folgender Weise, so dass ich anschließen kann, um series option in HighCharts:

series: [{
                name: 'Stopped /Idle',
                data: [21.2022222222222222, 334.7358333333333333]},
            {
                name: 'Working',
                data: [53.3066666666666667, 212.6386111111111111]},
            {
                name: 'Headland Turning',
                data: [0.04694444444444444444, 26.2955555555555556]},
            {
                name: 'Transport',
                data: [5.1425000000000000, 0.00444444444444444444]}]
        });

Danke.

InformationsquelleAutor sozhen | 2012-07-13

  1. 4
    var data = [
    {"unit":"a", "status":"Stopped /Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped /Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
     cat = 'Unit ' + data[i].unit;
     if(xCategories.indexOf(cat) === -1){
        xCategories[xCategories.length] = cat;
     }
}
for(i = 0; i < data.length; i++){
    if(seriesData){
      var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
      if(currSeries.length === 0){
          currSeries = seriesData[seriesData.length] = {name: data[i].status, data: []};
      } else {
          currSeries = currSeries[0];
      }
      var index = currSeries.data.length;
      currSeries.data[index] = data[i].val;
    } else {
       seriesData[0] = {name: data[i].status, data: [data[i].val]}
    }
}

    Nun, Sie haben seriesData und xCategories können Sie instanziieren Sie das Diagramm, indem Sie etwas ähnliches 

      chart = new Highchart({chart: {renderTo: 'chart-div', 
                                   type: 'column'
                                  }, 
                           plotOptions: {column: {stacking: 'normal'}},
                           xAxis:{ categories: xCategories}, 
                           series: seriesData
                         });

    EDIT: Hier der jsFiddle: http://jsfiddle.net/sujay/UMeGS/

    Danke, ich denke, deins wohl der richtige wäre. Aber es funktioniert nicht an meiner Stelle, würdest du bitte posten Sie ein Werkstück in die Geige? Danke
    Ich habe das jsfiddle wie gewünscht & auch Fix bestimmte Fehler hier. Sorry für die anfängliche Verwirrung. Ich war in Eile beim schreiben dieser Antwort.
    danke. Das ist, was ich am Ende gehen. Ich muss eine Menge lernen von Ihnen-code!
    Glücklich zu helfen! 🙂
    Da Highcharts 3.0, Kategorien können auch extrahiert werden, indem jeder Punkt einen Namen und eine Einstellung der Achsen-Typ "Kategorie".

    InformationsquelleAutor Sujay

  2. 1

    Auf die HighCharts website ich schaff die Demo-Galerie > HighChart-demos-Sektion und klickt auf Gestapelte Spalte auf der linken Seite der Seite. Von dort hatten Sie einen link zu einer JSFiddle mit einer demo und von dort aus sah ich zwei code-Abschnitte, die für Sie relevant sind.

    Der erste Abschnitt ist die xAxis Eigenschaft des HighChart-Objekt. Hier ist, was ich geändert es zu:

    xAxis: {
  categories: ['Unit A', 'Unit B']
}

    Diejenigen, die gehen, um jede Spalte, die Sie stapeln die Daten auf.

    Nächsten Abschnitt wird die series Eigenschaft. Dies ist, wo Sie übergeben die Daten, die Sie schauen, um Graphen in diesen Spalten. Es sieht wie folgt aus:

    series: [{
  name: 'Stopped /Idle',
  data: [21.2022222222222222, 334.7358333333333333]
}, {
  name: 'Working',
  data: [53.3066666666666667, 212.6386111111111111]
}, {
  name: 'Headland Turning',
  data: [0.04694444444444444444, 26.2955555555555556]
}, {
  name: 'Transport',
  data: [5.1425000000000000, 0.00444444444444444444]                         
}]

    In diesem Teil geben Sie den Namen der bestimmten Art von Daten und dann die Werte für jede Spalte angegeben werden in der xAxis Eigenschaft.

    Ich spielte mit einigen der Optionen wirklich schnell und es gibt so viel mehr, dass Sie tun können, mit dieser, aber hier ist das JSFiddle mit einem gestapelten Säulendiagramm und Ihre Daten.

    Hoffe, das hilft!

    Das ist ein bisschen schwierig, code in es..Eigentlich will ich einige Formatierungen mit meinen Daten im plugin die highcharts-Optionen
    Hey @Songtao Z, ich glaube, ich bin nicht ganz das problem zu verstehen. Ihre Daten verwendet wurde, in dem Beispiel, das ich gemacht (musste ich neu anordnen, die es ein bisschen), es gibt nur ein paar extra Optionen in der Geige. Ich verließ Sie dort, damit Sie sehen konnte, mehr Möglichkeiten.
    Sorry jason, ich danke Ihnen für Ihre Antwort. Ich aktualisiert meine Frage im Fall von Verwirrung. Ich weiß eigentlich, wie das Teil von HighCharts Optionen, die es braucht, um in meine Daten, weiß nur nicht, wie Sie spielen, um mit meiner JSON-Daten, so dass identifiziert werden kann, durch die Grafik-Optionen ohne harte Codierung, was bedeutet, dass ich nicht brauchen, um manuell alle Daten in den Optionen. Eigentlich das, was @Sujay Tat, war das, was ich will, aber sein code nicht funktioniert. Ich Spiele schon mit seinem code für eine Weile gestern und konnte immer noch nicht herausfinden, wie man mein plugin json-Daten.
    Ahhh! Ich sehe jetzt. Okay. Viel Glück! 🙂

    InformationsquelleAutor jasonmerino

Schreibe einen Kommentar