Развертка в сгруппированном столбце диаграммы с категориями

Question

Я создал простую сгруппированную диаграмму столбцов здесь ;Я хочу создать детализированный отчет со следующим набором данных:

[{
    "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 Wrapper

Answer 1

Highcharts drilldown не поддерживает то, что вы ожидаете. Тем не менее, вы можете добиться этого с помощью пользовательской функциональности drilldown.

1. При событии загрузки добавьте кнопку Go back с помощью Highcharts.SVGRenderer и скройте ее. При нажатии на кнопку обновить диаграмму данными уровня 0 (основными).
2. При обратном вызове события точки обновите диаграмму данными развертки и новыми категориями. В двух словах:

Код:

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/

Ссылка API:

• 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