Как выполнить детализацию на 3 уровня с помощью Highcharts?

В настоящее время я играю с этим примером и не понимаю, как сделать для этого трехуровневую развертку.

        name = 'Browser brands',
        data = [{
                y: 55.11,
                color: colors[0],
                drilldown: {
                    name: 'MSIE versions',
                    categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                    data: [10.85, 7.35, 33.06, 2.81],
                    color: colors[0]
                }

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/

В настоящее время там есть 2 категории данных, например, браузер, версия браузера, и я хочу создать другую категорию, работает с CSS3 или не работает с CSS3, что будет логическим значением.


javascript highcharts donut-chart drilldown
person user3843327    schedule 16.07.2014    source источник
comment
Но вам нужна детализация (например: jsfiddle.net/6LXVQ/1) или просто еще одно кольцо в круговая диаграмма?   -  person Paweł Fus    schedule 16.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно добавить еще один series. Например.

{
        name: 'CSS 3',
        data: cssData,
        size: '100%',
        innerSize: '70%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
            }
        }
    }

Также вам нужно изменить size и innerSize других серий, чтобы они совпадали, а также добавить конкретные данные в виде drilldown, если вы хотите сделать их точными. Для простоты я только что добавил здесь простые данные серии да/нет, но вам нужно будет создать еще один drilldown для каждой версии браузера, а затем проанализировать его, как и другие, чтобы сделать cssData

Демонстрация: http://jsfiddle.net/robschmuecker/zRgLp/1/

person Rob Schmuecker    schedule 16.07.2014