英文:
Can't build multilevel drilldown chart using Highchart API
问题
我在使用Highcharts API构建一个两级下钻图表时遇到了问题。我正在使用Jquery的$.getJSON()
方法从我的Go方法中检索数据。由于某种原因,我无法将数据保存到JavaScript变量中,所以我必须在$.getJSON
方法内部构建图表。当我导航到该URL时,我可以看到JSON被正确显示。我在处理数据以显示正确的图表方面遇到了很多困难。如果有人能够解释/帮助,我将非常感激,因为我已经在这上面工作了一段时间,我需要在工作中完成它。我将尽量使这个问题易于理解/阅读。以下是我目前的代码:
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'
}
});
});
这是我从/getdata获取的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"}
}
}
}
英文:
I'm having trouble building a 2 level drilldown chart using the Highcharts API. I am using Jquery's $.getJSON()
method which retrieves data from one of my Go methods. For some reason I can't save the data to a javascript variable so I am having to build the chart within the $.getJSON
method. I can see that the JSON is being properly displayed when I navigate to that URL. I'm having a lot of trouble manipulating the data to display the proper chart. If someone could please explain/help it would be greatly appreciated as I have been working on this for a while now and I need to get it done for my job. I will try to make this as easy as possible to understand/read. Here is what I have so far:
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'
}
});
});
Here is my JSON response from /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"}
}
}
}
答案1
得分: 1
你的JS代码不起作用,它有语法错误。
树的数据结构如下所示:
data: [{
name: '我有孩子',
id: 'id-1'
}, {
name: '我是一个孩子',
parent: 'id-1',
value: 2
}, {
name: '我是一个更小的孩子',
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/
英文:
Your JS code does not work, it has syntax errors.
Data structure for a tree is as follows:
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
}]
So, your parents are offices and they have values, their children are people and they also have values - so you need to link the people with the office with the correct id. E.g. like this:
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
});
});
});
example: https://jsfiddle.net/s4LLLo4z/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论