HighCharts：向下钻取到一个堆积列 [英] HighCharts: Drilldown to a Stacked Column

问题描述

大家好！我试图创建一个 HighChart ，但我不知道如何格式化我的钻取数据，我无法在互联网上找到任何示例！

这JSfiddle显示我得到了多少： http ：//jsfiddle.net/ma50685a/37/ 。

HighChart假设可视化已删除的评论。前两个栏是平均数量的过滤评论。当深入挖掘被激活时，我会堆积成堆的网站和四类为什么评论被过滤（讨厌的评论，垃圾邮件等）。

有人可以帮我解决这个问题，或者有一个如何格式化下钻数据的例子吗？

解决方案

要使堆叠列需要多个系列，为了在钻取后有多个系列，必须动态添加系列，例如在下钻事件中。

下面的对象的每个属性代表一个系列，它与顶级系列名称相关联。
对象'1'将在点击第一列后出现，并且将跨越4个类别。

  var drilldowns = {
 1：{
堆叠：'普通'，
名称：'脸谱'，
颜色：Highcharts.getOptions（）。colors [0]，
 data ：[
 ['讨厌评论'，2]，
 ['垃圾'，3]，
 ['category-3'，10]，
 ['category-4 '，15] 
] 
}，
 
 66：{
 name：'second-column-drilldown'，
 data：[
 ['第二列钻取点'，10] 
] 
} 
}; 
  

下一个对象'1'将与来自 drilldowns的数据.1 object：

  var drilldowns2 = {
 1：{
 color：Highcharts.getOptions（）。colors [1]，
 colorIndex：1，
 stacking：'normal'，
 name：'youtube'，
 data：[
 ['nasty comments'，5]，
 ['spam'，10]，
 ['category-3'，10]，
 ['category-4'，15] 
] 
} 
}; 
  

最后，系列必须添加并且深入挖掘。

  var series = drilldowns [e.point.name]，
 series2 = drilldowns2 [e.point.name]，
 series3 = drilldowns3 [e.point.name]; 
 
 this.addSingleSeriesAsDrilldown（e.point，series）; 
 this.addSingleSeriesAsDrilldown（e.point，series2）; 
 this.addSingleSeriesAsDrilldown（e.point，series3）; 
 this.applyDrilldown（）; 
  

例子： https://jsfiddle.net/ahjkouuh/

Hi everyone! I am trying to create a certain HighChart, but I am not sure on how I should format my drilldown data and I can't find any example on the internet!

This JSfiddle shows how far I have gotten: http://jsfiddle.net/ma50685a/37/.

The HighChart is suppose to visualise comments that have been deleted. The first two bars are mean amounts of filtered comments. When the drilldown is activated, I would to have stacked columns of websites and four categories of why a comment has been filtered (nasty comments, spam etc).

Could someone help me out with this or have an example of how to format the drilldown data?

解决方案

To have a stacked column you need multiple series, to have multiple series after the drilldown you have to add the series dynamically, e.g. on drilldown event.

Each property of the object below represents a series and it is associated with the top level series name. Object '1' will appear after the click on the first column and will span 4 categories.

var drilldowns = {
          1: {
            stacking: 'normal',
            name: 'facebook',
            color: Highcharts.getOptions().colors[0],
            data: [
              ['nasty comments', 2],
              ['spam', 3],
              ['category-3', 10],
              ['category-4', 15]
            ]
          },

          66: {
            name: 'second-column-drilldown',
            data: [
              ['second-column-drilldown-point', 10]
            ]
          }
        };

The next object '1' will be stacked with the data from the drilldowns.1 object:

var drilldowns2 = {
          1: {
            color: Highcharts.getOptions().colors[1],
            colorIndex: 1,
            stacking: 'normal',
            name: 'youtube',
            data: [
              ['nasty comments', 5],
              ['spam', 10],
              ['category-3', 10],
              ['category-4', 15]
            ]
          }
        };

And finally the series must be added and the drilldown is fired.

var series = drilldowns[e.point.name],
            series2 = drilldowns2[e.point.name],
            series3 = drilldowns3[e.point.name];

        this.addSingleSeriesAsDrilldown(e.point, series);
        this.addSingleSeriesAsDrilldown(e.point, series2);
        this.addSingleSeriesAsDrilldown(e.point, series3);
        this.applyDrilldown();

example: https://jsfiddle.net/ahjkouuh/

这篇关于HighCharts：向下钻取到一个堆积列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！