как сделать кольцевую диаграмму, используя высокие графики? - PullRequest
Новая
       51

как сделать кольцевую диаграмму, используя высокие графики?

0 голосов
/ 23 сентября 2019

Я хочу создать кольцевую диаграмму, которая выглядит как на рисунке ниже:

Donut chart

Пока я сделал это: 

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'subscribers-graph',
        type: 'pie'
     },
    title: {
        verticalAlign: 'middle',
        floating: true,
        text: '70% <br> 750K <br> Utilized',
    },
    plotOptions: {
        pie: {
            innerSize: '100%'
        },
        series: {
            states: {
                hover: {
                    enabled: false
                },
                inactive: {
                    opacity: 1
                }
            }
        }
    },
    series: [{
        borderWidth: 0,
        name: 'Subscribers',
        data: [
            {
                y: 30,
                name: "Online",
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#4679F8'],
                        [1, '#57B2A5']
                    ]
                },
            },
            {
                y: 20,
                name: "Offline",
                color: "#DDF4E4",
            }
        ],
        size: '100%',
        innerSize: '75%',
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }],
    credits: {
        enabled: false
    }
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="subscribers-graph" style="height: 300px"></div>

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

1 Ответ

1 голос
/ 23 сентября 2019

Вы можете добавить еще одну серию с правильными свойствами size и innerSize: 

series: [{
    ...
}, {
    size: '65%',
    innerSize: '95%',
    dataLabels: {
        enabled: false
    },
    data: [{
        y: 30
    }, {
        y: 20,
        color: 'rgba(0,0,0,0)'
    }]
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/e40a15hf/

Справочник по API: https://api.highcharts.com/highcharts/series.pie

...