Question

我需要在下面显示的列图类型上创建一个明细。这就是我到目前为止所做的。我能够创建简单的图形但不确定如何实现下拉功能。任何有关这方面的帮助将不胜感激。

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

Sample column graph

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'来显示它应显示哪个明细。

使用Highcharts在列图上向下钻取

1 个答案: