无法使用Highchart API构建多级钻取图表。

huangapple go评论116阅读模式
英文:

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/

huangapple
  • 本文由 发表于 2017年1月3日 05:31:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/41433528.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定