javascript - HighCharts:深入到堆叠列

Question

大家好!我正在尝试创建某个 HighChart，但我不确定应该如何格式化我的 drilldown 数据以及我在互联网上找不到任何例子!

这个 JSfiddle 显示了我已经走了多远:http://jsfiddle.net/ma50685a/37/ .

HighChart 应该可视化已删除的评论。前两个条是过滤评论的平均数量。当深入分析被激活时，我会堆叠网站列和评论被过滤的四个类别(令人讨厌的评论、垃圾邮件等)。

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

Answer 1

要拥有堆叠列，您需要多个系列，要在向下钻取后拥有多个系列，您必须动态添加系列，例如关于钻取事件。

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

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

下一个对象“1”将与来自 drilldowns.1 对象的数据堆叠在一起:

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/