来自 JSON 的 Highcharts 堆积柱形图 3 级向下钻取答案

【问题标题】：Highcharts stacked column chart 3 level drilldown from JSON来自 JSON 的 Highcharts 堆积柱形图 3 级向下钻取
【发布时间】：2021-05-11 19:20:25
【问题描述】：

我有以下 JSON：

mock_json = {
    "name":"Twin",
    "clus":[
     {
        "name": "Bob",
        "amount":
          {
            "low":2000,
            "sweet":700
          },
        "top_level": [
          {
            "name": "Andy",
            "amount":
              {
                "low":100,
                "sweet":80
              },
            "low_level": [
             {
                "name":"Dave",
                "amount":
                  {
                    "low":100,
                    "sweet":100
                  }
             }
            ]
          }
         ]
     }
    ]
}

我想要一个像这样https://semantia.com.au/articles/highcharts-drill-down-stacked-columns/ 的 highcharts 堆积柱形图，它向下钻取 3 个级别：第一级 -clus -> 名称列拆分为数量-> 低和高第二个杠杆 -top_level -> 名称列拆分为数量 -> 低和高第三级： -low_level -> 名称列拆分为数量 -> 低和高

我想用 jquery 来完成这个。

【问题讨论】：

标签： jquery highcharts

【解决方案1】：

这个数据结构不是很乱，但我认为你不能改变它。尝试使用此解决方案：

events: {
  drilldown: function(e) {
    console.log(e.point.name)
    if (!e.seriesOptions) {

      var chart = this,
        drilldowns = {
          'Bob': {
            name: 'Low',
            color: '#3150b4',
            data: [{
              name: data.clus[0]['top_level'][0].name,
              y: data.clus[0]['top_level'][0].amount.low,
              drilldown: true
            }]
          },
          'Andy': {
            name: 'Low',
            color: '#3150b4',
            data: [{
              name: data.clus[0]['top_level'][0]['low_level'][0].name,
              y: data.clus[0]['top_level'][0]['low_level'][0].amount.low,
              drilldown: true
            }]
          }
        },
        drilldowns2 = {
          'Bob': {
            name: 'Sweet',
            color: '#50B432',
            data: [{
              name: data.clus[0]['top_level'][0].name,
              y: data.clus[0]['top_level'][0].amount.sweet,
              drilldown: true
            }]
          },
          'Andy': {
            name: 'Sweet',
            color: '#50B432',
            data: [{
              name: data.clus[0]['top_level'][0]['low_level'][0].name,
              y: data.clus[0]['top_level'][0]['low_level'][0].amount.sweet,
              drilldown: true
            }]
          }
        },
        series = drilldowns[e.point.name],
        series2 = drilldowns2[e.point.name];
      chart.addSingleSeriesAsDrilldown(e.point, series);
      chart.addSingleSeriesAsDrilldown(e.point, series2);
      chart.applyDrilldown();

    }
  }
}

演示：https://jsfiddle.net/BlackLabel/pk36xrb0/

【讨论】：