深入分析高位图中的分组柱形图 [英] Drilldown for grouped column chart in highcharts

问题描述

我试图在高图中对分组柱形图进行深入分析。我的图表在这里：

$（function（）{//创建图表$（'＃container' ）.highcharts（{chart：{type：'column'}，title：{text：'Basic drilldown'}}，xAxis：{type：'category'，categories：[2011-12，2012-13， 2013-14，2014-15，2015-16]}，图例：{enabled：false}，plotOptions：{series：{borderWidth：0，dataLabels：{enabled：true，}}}，series ：[{name：First， data：[40351.62,51506.83,6856.23,80596.9228,94329.31]}，{name：Second，data：[40750.4963,56205.181,63776.2866,74912.5923,83801.83617]}，{name：Third ，data：[28589.0331305,40716.9008376,42050.10774,54934.329763,1811.2277]}，{name：Forth，data：[38022.7637359,52503.122283245,59760.303 7668，71143.7222503，27.60156]}]}）}）;

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js>< / script>< script src =http：// github.highcharts.com/master/highcharts.js\"></script><script src =http://github.highcharts.com/master/modules/drilldown.js>< / script> < div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>

< a href =http://jsfiddle.net/6LXVQ/1185/ =nofollow>分组柱形图

我想要一个深入了解图表中的每一列，但我不明白该怎么做？ 解决方案

这是一个很好的问题！



在你的系列数据中，你需要定义一个 y 值和一个关联的 drilldown id为每个数据点，例如： {y：40351.62，drilldown：'test'} 。

然后，您可以为展开的数据在向下钻取属性中设置项目。

这种方法的好处在于，您可以只为您想要的列指定向下钻取（例如，仅针对一个系列）。

以下是我修改的代码对于这个例子：

 钻取：{
 series：[{
 name：'Test Drilldown'， 
 id：'test'，
 data：[
 ['data A'，24.13]，
 ['data B'，17.2]，
 ['data C'，8.11 ]，
 ['data D'，5.33] 
] 
}] 
}，
系列：[
 {
name ：第一，
数据：[
 {y：40351.62，钻取：'test'}，
 51506.83，
 68566.23，
 80596.9228，
 94329.31 
] 
}，
 // ...其他系列
] 
  

你可以在这里找到你的小提琴的更新版本： http：//

我希望这对你有帮助！

I'm trying to make drilldown for a grouped column chart in highcharts. My chart is here:

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category',
            categories: [
                          "2011-12",
                          "2012-13",
                          "2013-14",
                          "2014-15",
                          "2015-16"
                        ]
            
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [
                  {
                    "name": "First",
                    "data": [
                      40351.62,
                      51506.83,
                      68566.23,
                      80596.9228,
                      94329.31
                    ]
                  },
                  {
                    "name": "Second",
                    "data": [
                      40750.4963,
                      56205.181,
                      63776.2866,
                      74912.5923,
                      83801.83617
                    ]
                  },
                  {
                    "name": "Third",
                    "data": [
                      28589.0331305,
                      40716.9008376,
                      42050.10774,
                      54934.329763,
                      1811.2277
                    ]
                  },
                  {
                    "name": "Forth",
                    "data": [
                      38022.7637359,
                      52503.122283245,
                      59760.3037668,
                      71143.7222503,
                      27.60156
                    ]
                  }
                ]
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Grouped Column Chart

I want to have a drilldown for every column in the chart. But I don't understand how to do that ?

解决方案

This is a great question!

In your series data, what you'll need to is define a y value and an associated drilldown id for each data point, such as: { y: 40351.62, drilldown: 'test' }.

Then, you can set up items in the drilldown attribute for the expanded data.

The beauty of this method is that you can specify drilldowns for only the columns you want (say, for only one series).

Here's the code I modified for this example:

drilldown : {
    series: [{
        name: 'Test Drilldown',
        id: 'test',
        data: [
            [ 'data A', 24.13 ],
            [ 'data B', 17.2 ],
            [ 'data C', 8.11 ],
            [ 'data D', 5.33 ]
        ]
    }]
},
series: [
      {
        "name": "First",
        "data": [
          { y: 40351.62, drilldown: 'test' },
          51506.83,
          68566.23,
          80596.9228,
          94329.31
        ]
      },
      // ... other series
]

You can find an updated version of your fiddle here: http://jsfiddle.net/brightmatrix/6LXVQ/1187/

I hope this is helpful for you!

这篇关于深入分析高位图中的分组柱形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！