Question

大家好！我正在尝试创建某个HighChart，但我不确定如何格式化drilldown数据，我无法做到在互联网上找到任何例子！

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

HighChart假设可视化已删除的评论。前两个条形是过滤注释的平均数量。当钻取被激活时，我将有堆叠的网站列和四个类别的过滤评论（恶意评论，垃圾邮件等）。

有人可以帮我解决这个问题，还是有一个如何格式化钻取数据的例子？

Answer 1

您只是忘了包含下钻js（http://jsfiddle.net/ma50685a/38/）

在highstock之后添加以下脚本： <script src="https://code.highcharts.com/modules/drilldown.js"></script>

编辑：对不起，我没有正确地阅读这个问题......这有效：http://jsfiddle.net/ma50685a/39/

在此处找到：http://www.semantia.com.au/articles/highcharts-drill-down-stacked-columns/

Answer 2

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

下面对象的每个属性代表一个系列，它与顶级系列名称相关联。对象＆＃39; 1＆＃39;将在点击第一列后显示，并将跨越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]
            ]
          }
        };

下一个对象＆＃39; 1＆＃39;将与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/

HighCharts：向下钻取堆积柱

2 个答案: