Kann kein Multilevel-Drilldown-Diagramm mit Highchart-API erstellen

Question

Ich habe Probleme beim Erstellen eines 2-Ebenen-Drilldown-Diagramms mit der Highcharts-API. Ich verwende Jquery $.getJSON() Methode, die Daten von einer meiner Go-Methoden abruft. Aus irgendeinem Grund kann ich die Daten nicht in einer Javascript-Variable speichern, daher muss ich das Diagramm innerhalb der $.getJSON-Methode erstellen. Ich kann sehen, dass der JSON korrekt angezeigt wird, wenn ich zu dieser URL navigiere. Ich habe große Schwierigkeiten, die Daten zu manipulieren, um das richtige Diagramm anzuzeigen. Wenn jemand bitte erklären/helfen könnte, würde ich sehr dankbar sein, da ich seit einiger Zeit daran arbeite und ich es für meinen Job erledigen muss. Ich werde versuchen, dies so einfach wie möglich zu machen, um es zu verstehen/zu lesen. Hier ist, was ich bisher:

Go:

type Office struct { 
    Austin struct { 
     Balance string 
     RM struct { 
      Matt struct { 
       Balance string 
      } 
      John struct { 
       Balance string 
      } 
      Blake struct { 
       Balance string 
      } 
      Jamie struct { 
       Balance string 
      } 
     } 
    } 
    ElPaso struct { 
     Balance string 
     RM struct { 
      Brenda struct { 
       Balance string 
      } 
      Ericka struct { 
       Balance string 
      } 
      Nicole struct { 
       Balance string 
      } 
      Stephanie struct { 
       Balance string 
      } 
      Tricia struct { 
       Balance string 
      } 
      Viri struct { 
       Balance string 
      } 
     } 
    } 
    ABL struct { 
     Balance string 
     RM struct { 
      BrianABL struct { 
       Balance string 
      } 
      JamieABL struct { 
       Balance string 
      } 
      JohnABL struct { 
       Balance string 
      } 
      MattABL struct { 
       Balance string 
      } 
      TimABL struct { 
       Balance string 
      } 
     } 
    } 
} 

func getData(res http.ResponseWriter, req *http.Request) { 
    office := Office{} 
    conn, err := sql.Open("mssql", "my db credentials") 
    if err != nil { 
     log.Fatal("Open connection failed:", err.Error()) 
    } 
    defer conn.Close() 

    rows, err := conn.Query("my select query") 
    if err != nil { 
     panic(err.Error()) 
    } 
    for rows.Next() { 
     var Austin, ElPaso, ABL, Matt, John, Blake, Jamie, Brenda, Ericka, Nicole, Stephanie, Tricia, Viri, BrianABL, JamieABL, JohnABL, MattABL, TimABL string 
     rows.Scan(&Austin, &ElPaso, &ABL, &Matt, &John, &Blake, &Jamie, &Brenda, &Ericka, &Nicole, &Stephanie, &Tricia, &Viri, &BrianABL, &JamieABL, &JohnABL, &MattABL, &TimABL) 
     office.Austin.Balance = Austin 
      office.Austin.RM.Matt.Balance = Matt 
      office.Austin.RM.John.Balance = John 
      office.Austin.RM.Blake.Balance = Blake 
      office.Austin.RM.Jamie.Balance = Jamie 
     office.ElPaso.Balance = ElPaso 
      office.ElPaso.RM.Brenda.Balance = Brenda 
      office.ElPaso.RM.Ericka.Balance = Ericka 
      office.ElPaso.RM.Nicole.Balance = Nicole 
      office.ElPaso.RM.Stephanie.Balance = Stephanie 
      office.ElPaso.RM.Tricia.Balance = Tricia 
      office.ElPaso.RM.Viri.Balance = Viri 
     office.ABL.Balance = ABL 
      office.ABL.RM.BrianABL.Balance = BrianABL 
      office.ABL.RM.JamieABL.Balance = JamieABL 
      office.ABL.RM.JohnABL.Balance = JohnABL 
      office.ABL.RM.MattABL.Balance = MattABL 
      office.ABL.RM.TimABL.Balance = TimABL 
    } 
    js, err := json.Marshal(office) 
    if err != nil { 
     http.Error(res, err.Error(), http.StatusInternalServerError) 
     return 
    } 
    res.Header().Set("Content-Type", "text/json") 
    res.Header().Set("Access-Control-Allow-Origin", "*") 
    res.Write(js) 
} 

JavaScript:

$.getJSON('/getdata', function(data) { 
    for (office in data) { 
     if (data.hasOwnProperty(office)) { 
      officeVal = 0; 
      officeP = { 
       id: 'id_' + officeI, 
       name: office, 
       color: Highcharts.getOptions().colors[officeI] 
      }; 
      officeBalI = 0; 
      for (officeBalance in data[office]) { 
       if (data[office].hasOwnProperty(officeBalance)) { 
        officeBalanceP = { 
         id: officeP.id + '_' + officeBalI, 
         name: officeBalance, 
         parent: officeP.id 
        }; 
        points.push(officeBalanceP); 
        causeI = 0; 
        for (cause in data[office][country]) { 
         if (data[office][country].hasOwnProperty(cause)) { 
          causeP = { 
           id: countryP.id + '_' + causeI, 
           name: causeName[cause], 
           parent: countryP.id, 
           value: Math.round(+data[office][country][cause]) 
          }; 
          officeVal += causeP.value; 
          points.push(causeP); 
          causeI = causeI + 1; 
         } 
        } 
        countryI = countryI + 1; 
       } 
      } 
      for (RM in data[office]) { 
       if (data[office].hasOwnProperty(RM)) { 
        RMP = { 
         id: officeP.id + '_' + RMI, 
         name: RM, 
         parent: officeP.id 
        }; 
        points.push(RMP); 
       } 
      } 
      officeP.value = Math.round(officeVal/countryI); 
      points.push(officeP); 
      officeI = officeI + 1; 
     } 
    } 
    Highcharts.chart('container', { 
     series: [{ 
      type: 'treemap', 
      layoutAlgorithm: 'squarified', 
      allowDrillToNode: true, 
      animationLimit: 1000, 
      dataLabels: { 
       enabled: false 
      }, 
      levelIsConstant: false, 
      levels: [{ 
       level: 1, 
       dataLabels: { 
        enabled: true 
       }, 
       borderWidth: 3 
      }], 
      data: points 
     }], 
     subtitle: { 
      text: 'Subtitle test' 
     }, 
     title: { 
      text: 'Title test' 
     } 
    }); 
}); 

Hier ist meine JSON-Antwort von/getdata:

{ 
    "Austin" : { 
     "Balance" : "12345.12", 
     "RM" : { 
      "Matt" : {"Balance" : "12345.12"}, 
      "John" : {"Balance" : "12345.12"}, 
      "Blake" : {"Balance" : "12345.12"}, 
      "Jamie" : {"Balance" : "12345.12"} 
     } 
    }, 
    "ElPaso" : { 
     "Balance" : "12345.12", 
     "RM" : { 
      "Brenda" : {"Balance" : "12345.12"}, 
      "Ericka" : {"Balance" : "12345.12"}, 
      "Nicole" : {"Balance" : "12345.12"}, 
      "Stephanie" : {"Balance" : "12345.12"}, 
      "Tricia" : {"Balance" : "12345.12"}, 
      "Viri" : {"Balance" : "12345.12"} 
     } 
    }, 
    "ABL" : { 
     "Balance" : "12345.12", 
     "RM" : { 
      "BrianABL" : {"Balance" : "12345.12"}, 
      "JamieABL" : {"Balance" : "12345.12"}, 
      "JohnABL" : {"Balance" : "12345.12"}, 
      "MattABL" : {"Balance" : "12345.12"}, 
      "TimABL" : {"Balance" : "12345.12"} 
     } 
    } 
} 

Answer 1

Ihr JS-Code funktioniert nicht, er hat Syntaxfehler.

Datenstruktur für einen Baum ist wie folgt:

data: [{ 
    name: 'I have children', 
    id: 'id-1' 
}, { 
    name: 'I am a child', 
    parent: 'id-1', 
    value: 2 
}, { 
    name: 'I am a smaller child', 
    parent: 'id-1', 
    value: 1 
}] 

Also, deine Eltern sind Büros und sie haben Werte, ihre Kinder sind Menschen, und sie haben auch Werte - so müssen Sie die Menschen mit dem verbinden Büro mit der richtigen ID. Z.B. wie folgt aus:

var points = []; 

Object.keys(data).forEach((office, i) => { 
    var people = data[office]['RM'], 
     color = Highcharts.getOptions().colors[i], 
     id = 'id_' + i; 

    points.push({ 
    name: office, 
    value: Number(data[office]['Balance']), 
    id: id, 
    color: color 
    }); 

    Object.keys(people).forEach((person, j) => { 
    points.push({ 
     name: person, 
     value: Number(people[person]['Balance']), 
     parent: id, 
     color: color 
    }); 
    }); 
}); 

Beispiel: https://jsfiddle.net/s4LLLo4z/