Javascript 在带有类别的分组柱状图中向下展开

我创建了一个简单的分组柱状图； 我想创建具有以下数据集的深入报告：

[{
    "category" : "Quantitative", 
    "counts" : [
        {
            "topic" : "Compound Interest", 
            "correct" : 0
            "incorrect" : 1
            "missed" : 0
        }, 
        {
            "topic" : "Pipers and Cistern", 
            "correct" : 0
            "incorrect" : 0
            "missed" : 1
        }, 
        {
            "topic" : "Simplification", 
            "correct" : 0
            "incorrect" : 0
            "missed" : 1
        }
    ]
}, 
{
    "category" : "Quantitative", 
    "counts": [ ...again some objects with counts]
}]

---

当我们点击

Quantitative

中的任何列时，我们应该进入

Quantitative

的深入报告，它还应该更改类别名称。我们如何才能做到这一点？我正在使用Highcharts React包装器

Highcharts

深入分析

不支持您所期望的内容。但是，您可以通过自定义的

向下展开功能来实现它

加载事件添加
返回
按钮，使用
Highcharts.svgRender
并隐藏它。单击按钮，用0级（主）数据更新图表

点对点事件回调使用深入数据和新类别更新图表。简而言之：
代码：


var drilldownData=[{
“类别”：“数量1”，
“计数”：[{
“主题”：“复利”，
"正确":二,，
“不正确”：7，
“错过”：4
},
{
“主题”：“管道和蓄水池”，
"正确":五,，
"不正确":三,，
“错过”：1
},
{
“主题”：“简化”，
"正确":二,，
“不正确”：5，
“错过”：2
}
]
}, {
“类别”：“数量2”，
“计数”：[{
“主题”：“复利”，
"正确":二,，
“不正确”：8，
“错过”：11
},
{
“主题”：“管道和蓄水池”，
"正确":三,，
“不正确”：6，
“错过”：3
},
{
“主题”：“简化”，
"正确":二,，
“不正确”：11，
“错过”：8
}
]
}];
风险值数据=[{
“名称”：“正确”，
“颜色”：“0098ad”，
“数据”：[{
y:8，
深入研究：“定量研究1”，
类名：“向下搜索”
},
9,
7.
]
}, {
“名称”：“不正确”，
“颜色”：“BF350A”，
“数据”：[{
y:8，
深入研究：“定量研究2”，
类名：“向下搜索”
},
7.
10
]
}, {
“名称”：“遗漏”，
“颜色”：“F7A35B”，
“数据”：[
4.
4.
3.
]
}];
变量类别=[
“定量”，
“语言能力”，
“逻辑推理”
];
Highcharts.chart（'容器'{
图表：{
键入：“列”，
活动：{
加载：函数（）{
var图表=此；
chart.customBtn=chart.renderer.button（'◁ 返回'，40，10，函数（）{
chart.update({
xAxis：{
类别：类别
},
系列：JSON.parse（JSON.stringify（数据））
}，对）；
chart.customBtn.hide（）；
}).add（）.hide（）；
}
}
},
“出口”：{
“启用”：正确，
“按钮”：{
“上下文按钮”：{
“菜单项”：[
“下载PNG”，
“下载SVG”，
“分隔符”，
“标签”
]
}
}
},
“标题”：{
“文本”：空
},
“xAxis”：{
“类别”：类别，
“标题”：{
“文本”：“章节”，
“风格”：{
“字体权重”：“粗体”，
“颜色”：“000”
}
}
},
“yAxis”：{
“allowDecimals”：false，
“min”：0，
“标题”：空
},
“工具提示”：{}，
“打印选项”：{
“列”：{
“数据标签”：{
“已启用”：真
},
要点：{
活动：{
单击：函数（）{
var点=这个，
chart=point.series.chart，
向下钻取=this.drilldown，
data=drilldownData.find（elem=>elem.category==drilldown），
类别=[]，
系列=[{
姓名：'正确'
}, {
名称：“不正确”
}, {
姓名：“错过”
}];
if（向下钻取和数据（&D）{
data.counts.forEach（函数（count，i）{
类别。推送（计数。主题）；
系列[i]。数据=[{
y:伯爵，对，
向下展开：null
}, {
y:伯爵，不正确，
向下展开：null
}, {
y:伯爵，没打中，
向下展开：null
}];
});
chart.update({
xAxis：{
类别：类别
},
系列：系列
});
chart.customBtn.show（）；
}
}
}
}
}
},
“series”：JSON.parse（JSON.stringify（数据））
});
。向下展开{
光标：指针；
}

检查此示例：感谢您的帮助：）@WojciechChmiel我之前能够想出此解决方案，但问题是它一次显示所有深入系列。。。。我希望在此处显示特定的集合，单击w.r.t类别。。您可以参考我上面提到的数据集了解更多详细信息