在具有类别的分组柱状图中向下钻取

Question

我已经创建了一个简单的分组柱状图here；我想创建一个具有以下数据集的深入查看报告：

[{
    "category" : "Quantitative", 
    "counts" : [
        {
            "topic" : "Compound Interest", 
            "correct" : 0
            "incorrect" : 1
            "missed" : 0
        }, 
        {
            "topic" : "Pipers and Cistern", 
            "correct" : 0
            "incorrect" : 0
            "missed" : 1
        }, 
        {
            "topic" : "Simplification", 
            "correct" : 0
            "incorrect" : 0
            "missed" : 1
        }
    ]
}, 
{
    "category" : "Quantitative", 
    "counts": [ ...again some objects with counts]
}]

当我们单击Quantitative中的任何列时，我们应该转到Quantitative的深入报告，它还应该更改类别名称。我们如何才能做到这一点？我正在使用Highcharts React包装器

Answer 1

Highcharts drilldown不支持您所期望的内容。但是，您可以通过定制drilldown功能来实现它。

1. On load event使用Highcharts.SVGRenderer添加Go back按钮并将其隐藏。单击该按钮，使用0级(主)数据更新图表。
2. On point event callback使用深入分析数据和新类别更新图表。简而言之：

代码：

​

var drilldownData = [{
  "category": "Quantitative_1",
  "counts": [{
      "topic": "Compound Interest",
      "correct": 2,
      "incorrect": 7,
      "missed": 4
    },
    {
      "topic": "Pipers and Cistern",
      "correct": 5,
      "incorrect": 3,
      "missed": 1
    },
    {
      "topic": "Simplification",
      "correct": 2,
      "incorrect": 5,
      "missed": 2
    }
  ]
}, {
  "category": "Quantitative_2",
  "counts": [{
      "topic": "Compound Interest",
      "correct": 2,
      "incorrect": 8,
      "missed": 11
    },
    {
      "topic": "Pipers and Cistern",
      "correct": 3,
      "incorrect": 6,
      "missed": 3
    },
    {
      "topic": "Simplification",
      "correct": 2,
      "incorrect": 11,
      "missed": 8
    }
  ]
}];

var data = [{
  "name": "Correct",
  "color": "#0098ad",
  "data": [{
      y: 8,
      drilldown: "Quantitative_1",
      className: 'drilldown'
    },
    9,
    7
  ]
}, {
  "name": "InCorrect",
  "color": "#BF350A",
  "data": [{
      y: 8,
      drilldown: "Quantitative_2",
      className: 'drilldown'
    },
    7,
    10
  ]
}, {
  "name": "Missed",
  "color": "#F7A35B",
  "data": [
  	4,
    4,
    3
  ]
}];

var categories = [
  "Quantitative",
  "Verbal Ability",
  "Logical Reasoning"
];


Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this;

        chart.customBtn = chart.renderer.button('◁ Go back', 40, 10, function() {
          chart.update({
            xAxis: {
              categories: categories
            },
            series: JSON.parse(JSON.stringify(data))
          }, true);

          chart.customBtn.hide();
        }).add().hide();
      }
    }
  },
  "exporting": {
    "enabled": true,
    "buttons": {
      "contextButton": {
        "menuItems": [
          "downloadPNG",
          "downloadSVG",
          "separator",
          "label"
        ]
      }
    }
  },
  "title": {
    "text": null
  },
  "xAxis": {
    "categories": categories,
    "title": {
      "text": "Section",
      "style": {
        "fontWeight": "bold",
        "color": "#000"
      }
    }
  },
  "yAxis": {
    "allowDecimals": false,
    "min": 0,
    "title": null
  },
  "tooltip": {},
  "plotOptions": {
    "column": {
      "dataLabels": {
        "enabled": true
      },
      point: {
        events: {
          click: function() {
            var point = this,
              chart = point.series.chart,
              drilldown = this.drilldown,
              data = drilldownData.find(elem => elem.category === drilldown),
              categories = [],
              series = [{
                name: 'Correct'
              }, {
                name: 'InCorrect'
              }, {
                name: 'Missed'
              }];

            if (drilldown && data) {
              data.counts.forEach(function(count, i) {
                categories.push(count.topic);

                series[i].data = [{
                  y: count.correct,
                  drilldown: null
                }, {
                  y: count.incorrect,
                  drilldown: null
                }, {
                  y: count.missed,
                  drilldown: null
                }];
              });

              chart.update({
                xAxis: {
                  categories: categories
                },
                series: series
              });

              chart.customBtn.show();
            }
          }
        }
      }
    }
  },
  "series": JSON.parse(JSON.stringify(data))
});

.drilldown {
  cursor: pointer;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

​

演示：

• https://jsfiddle.net/BlackLabel/zdm4cLty/

接口参考：

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
• https://api.highcharts.com/highcharts/chart.events.load
• https://api.highcharts.com/highcharts/plotOptions.column.point.events.click