Развертка на столбце с использованием Highcharts

Question

Мне нужно создать развертку по типу столбца, показанному ниже. Это то, что я сделал до сих пор. Я могу создать простой график, но не знаю, как реализовать раскрывающуюся функциональность. Любая помощь по этому поводу будет оценена по достоинству.

Обращаем ваше внимание, что данные примера взяты из сценария 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. Трудность заключается в том, как заставить сценарий различать столбец для мужчин и женщин по одному и тому же признаку.

Answer 1

Во-первых, см. Ссылку this, чтобы узнать, как выполнить сверление. Ниже приведена ссылка на скрипку, вы можете увидеть ее для справки. В этом случае для соответствующих баров вы указываете значение детализации. Затем в ключе развертки вы можете предоставить данные для графика, который вам нужно показать на этой развертке. Вот пример код

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] 
     }] 

Как вы можете видеть, вы предоставляете drilldown: 'first_drilldown', чтобы показать, какой развернутый он должен показать.