Highcharts堆叠柱状图从JSON向下钻取3级
Highcharts堆叠柱状图从JSON向下钻取3级
提问于 2021-05-12 03:20:26
我有以下JSON：
mock_json = {
"name":"Twin",
"clus":[
{
"name": "Bob",
"amount":
{
"low":2000,
"sweet":700
},
"top_level": [
{
"name": "Andy",
"amount":
{
"low":100,
"sweet":80
},
"low_level": [
{
"name":"Dave",
"amount":
{
"low":100,
"sweet":100
}
}
]
}
]
}
]
}我想要一个像这样的highcharts堆叠柱状图，它向下钻取3级:第一级-clus -> name，列拆分为amount-> low and high二级-top_level -> name，列拆分为amount -> low，hign第三级：-low_level -> name，column split，amount -> low and hign
我想用jquery来实现这一点。
回答 1
Stack Overflow用户
发布于 2021-05-12 21:02:05
这个数据结构并不是很混乱，但是我假设你不能改变它。尝试使用此解决方案：
events: {
drilldown: function(e) {
console.log(e.point.name)
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Bob': {
name: 'Low',
color: '#3150b4',
data: [{
name: data.clus[0]['top_level'][0].name,
y: data.clus[0]['top_level'][0].amount.low,
drilldown: true
}]
},
'Andy': {
name: 'Low',
color: '#3150b4',
data: [{
name: data.clus[0]['top_level'][0]['low_level'][0].name,
y: data.clus[0]['top_level'][0]['low_level'][0].amount.low,
drilldown: true
}]
}
},
drilldowns2 = {
'Bob': {
name: 'Sweet',
color: '#50B432',
data: [{
name: data.clus[0]['top_level'][0].name,
y: data.clus[0]['top_level'][0].amount.sweet,
drilldown: true
}]
},
'Andy': {
name: 'Sweet',
color: '#50B432',
data: [{
name: data.clus[0]['top_level'][0]['low_level'][0].name,
y: data.clus[0]['top_level'][0]['low_level'][0].amount.sweet,
drilldown: true
}]
}
},
series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.applyDrilldown();
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67493106
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号