Hightcharts - несколько круговых диаграмм на линейном графике

Question

Каков наилучший способ достижения приведенного ниже графика с использованием библиотеки Highcharts?

Answer 1

В качестве меток данных можно создать дополнительные pie диаграммы:

chart: {
    events: {
        load: function() {
            var points = this.series[0].points,
                container;

            points.forEach(function(p) {
                container = p.dataLabel.div.querySelector('.dataLabelChart');

                Highcharts.chart(container, {
                    chart: {
                        margin: 0,
                        backgroundColor: 'transparent'
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        enabled: false
                    },
                    series: [{
                        innerSize: 30,
                        dataLabels: {
                            enabled: false
                        },
                        type: 'pie',
                        data: [1, 2, 3]
                    }],
                    legend: {
                        enabled: false
                    }
                });
            });
        }
    }
},
series: [{
    dataLabels: {
        verticalAlign: 'middle',
        enabled: true,
        useHTML: true,
        formatter: function() {
            return '<div class="dataLabelChart" id="' + this.point.index + '"></div>'
        }
    },
    ...
}]

---

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

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