Javascript 使用Highcharts在柱状图上向下展开

我需要在下面显示的柱状图类型上创建一个向下展开。这就是我到目前为止所做的。我能够创建简单的图形，但不确定如何实现下拉功能。在此方面的任何帮助都将不胜感激

请注意，给出的示例数据来自python脚本

function create_graph() {

var maingraph = {{ maingraph|safe }}
chart = new Highcharts.Chart ({
    chart: {
         height: 600,
         width: 1200,
         renderTo: container1,
         type: 'column'
         //reflow: false
    },
    title: {
        text: maingraph[0].graphTitle
    },
    xAxis: {
        categories: maingraph[0].xAxisLabels
    },
    yAxis: {
        min: 0,
        title: {
            text: maingraph[0].yAxisTitle
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: generateMainData({{ maingraph|safe }}),
    <!--drilldown: {
        <!--series: generateChildData({{ childgraph|safe }})
    <!--}
 });
}

function generateMainData(g) {
    return [{ name: 'Males',
              data: g[0].yAxisValues
              <!--drilldown: what to write here?
    }, {
        name: 'Females',
        data: g[1].yAxisValues }];
        <!--drilldown: what to write here?
}

if ({{ maingraph|safe }}) {
    create_graph();
}

</script>

maingraph = [{'xAxisLabels': ['Trait1', 'Trait2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Title', 'xAxisTitle': 'Traits', 'yAxisValues': [0.41, 0.71]}, {'xAxisLabels': ['Trait1', 'Trait2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Title', 'xAxisTitle': 'Traits', 'yAxisValues': [0.28, 0.27]}]

childgraph = [{'Trait1': {'xAxisLabels': ['Facet1', 'Facet2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Title', 'xAxisTitle': 'Facets', 'yAxisValues': [0.19, 0.17]}, 'Trait2': {'xAxisLabels': ['Facet3', 'Facet4'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Facets', 'xAxisTitle': 'Facets', 'yAxisValues': [0.96, 0.22]}}, {'Trait1': {'xAxisLabels': ['Facet1', 'Facet2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Facets', 'xAxisTitle': 'Facets', 'yAxisValues': [0.33, 0.34]}, 'Trait2': {'xAxisLabels': ['Facet3', 'Facet4'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Facets', 'xAxisTitle': 'Facets', 'yAxisValues': [0.12, 0.42]}}]

我想要的是，当我单击主图中的Trait1列时，我应该得到两列Facet1和Facet2。难点在于如何使脚本区分相同特征的男性和女性列。

首先，请参阅链接以了解应如何实施深入分析。下面有一个小提琴的链接，你可以看到它供你参考。在本例中，对于各个条形图，您已经给出了向下钻取值。然后在向下钻取键中，您可以提供需要在向下钻取中显示的图形的数据。下面是示例代码

series: [{
        name: 'Total count',
        color: colors[3],
        data: [{y: first_data[0], drilldown: 'first_drilldown', name: 'first', color: colors[3], display_name: 'First'},
          {y: second_data[0], drilldown: 'second_drilldown', name: 'Second', color: colors[3], display_name: 'Second'}]
      }],
  drilldown: {
        series: [{
          id: 'first_drilldown',
          name: 'fd',
          data: first_data[2]
        },{
          id: 'second_drilldown',
          name: 'sd',
          data: second_data[1]
        }]

---

如您所见，您提供了深入分析：“first_drilldown”来显示应该显示哪个深入分析

如果您需要通过ajax加载一些数据，本示例将向您介绍如何处理向下展开：ajax是什么意思？我能够在不进行任何ajax调用的情况下执行向下搜索。当页面加载时，我在js变量中设置数据，然后使用该数据生成图形。没有涉及ajax调用。fiddle使用ajax。但是，如果您最初加载所有数据，您可以在生成图形时使用相同的数据。请参阅我在回答中提供的代码示例。我只是想提供一个示例，您可以在其中看到，如果需要从服务器加载向下搜索数据，并且没有所有的数据，则如何对其进行增强initally@geeky_sh：我了解如何实施drlldown，我的问题是如何使用我的两个数据结构maingraph和childgraph来实现它。如果您能给出一个使用我的示例代码作为参考的示例，那就太好了。