Highchart APIを使用してマルチレベルドリルダウンチャートを作成できません

Question

Highcharts APIを使用して2レベルのドリルダウンチャートを作成する際に問題があります。私はGoメソッドの1つからデータを取得するJqueryの$.getJSON()メソッドを使用しています。何らかの理由でデータをjavascript変数に保存できないため、$.getJSONメソッド内でチャートを作成する必要があります。私はそのURLに移動するとJSONが適切に表示されていることがわかります。私は、適切なグラフを表示するためにデータを操作するのに苦労しています。誰かが説明してくれれば助けてくれると助けてくれました。私はこれをしばらくは続けてきましたので、とても感謝しています。私はこれをできるだけ簡単に理解して読むことを試みます。ここで私はこれまで持っているものです。

ゴー：

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

は/函からの私のJSONレスポンスです：

{ 
    "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

あなたのJSコードは動作しません。構文エラーがあります。次のようにツリーの

データ構造は次のとおりです。

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 
}] 

だから、あなたの両親はオフィスがあり、彼らが値を持って、子供たちが人々であり、彼らはまた、値を持っている - ので、あなたが人々をリンクする必要があります正しいIDのオフィス。例えば。このような：

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

例：https://jsfiddle.net/s4LLLo4z/