Блог

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

         Highcharts.chart({
            chart: {
                styledMode: true,
                renderTo: chart,
                events: {},
            },
            title: {
                text: "",
            },
            credits: {
                enabled: false,
            },
            tooltip: {
                enabled: false,
            },

            plotOptions: {
                series: {
                    states: {
                        hover: {
                            enabled: false,
                        },
                    },
                    enableMouseTracking: false,
                },
                pie: {
                    dataLabels: {
                        distance: 3,
                        padding: 0,
                        // crop: false,
                        // overflow: "allow",
                        alignTo: "toPlotEdges",
                        verticalAlign: "middle",
                    },
                },
            },
            series: [
                {
                    type: "pie",
                    allowPointSelect: false,
                    keys: ["name", "y", "selected"],
                    enableMouseTracking: false,
                    data: highchartsData,
                    innerSize: "25%",
                    showInLegend: false,
                    size: "95%",
                    states: {
                        hover: {
                            enabled: false,
                        },
                    },
                },
                {
                    type: "pie",
                    allowPointSelect: false,
                    keys: ["name", "y", "selected"],
                    enableMouseTracking: false,
                    data: labelData,
                    showInLegend: true,
                    states: {
                        hover: {
                            enabled: false,
                        },
                    },
                },
            ],
        });
 

В настоящее время такое поведение:

Не знаю, что делать, чтобы отключить это, чего я еще не сделал.

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

     series: [{
        dataLabels: {
            format: '{point.y}%'
        },
        ...
    }]
 

Живая демонстрация: http://jsfiddle.net/Черная метка/jhmfcty3/

Ссылка на API: https://api.highcharts.com/highcharts/series.pie.Метки данных.формат