Удаление высокоразмерных datalabels при изменении размера окна

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

Я попытался добавить windows.resize с помощью formatter: function (), но это не удалось.

Вот код, который я использую в настоящее время:

          //Radialize the colors
            Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
                return {
                    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')]//darken
                    ]
                };
            });

           //Build the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [

                     ]
                  },                        
                },
                title: {
                    text: 'Header Here'
                },
                tooltip: {
                    pointFormat: '{series.name}: {point.percentage}%',
                    percentageDecimals: 0
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return ''+ this.point.name +': '+ Math.round(this.percentage) +'%';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Votes',
                    data: [
                        ['Vote One', 50],                   
                        ['Vote Two', 50],
                        ['Vote three', 2]
                    ]
                }]
            });

В любом случае, кроме создания новой диаграммы с изменением размера, для ярлыков можно установить значение false/hidden? и снова показано выше определенной резолюции?

Большое спасибо

1
nl ja de

1 ответы

Вы можете установить useHTML как true для datalabels, а в formatter - определить свои собственные div. Затем, когда вы ловите событие изменения размера, используйте show/hide functons.

Простой пример, который показывает/скрывает datalabels после нажатия кнопки, доступен здесь:

http://jsfiddle.net/VYGEW/

chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function() {
                        return '<div class="datalabel">' + this.y + '</div>';
                    }
                }
            }
        },
        series: [{
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    }, function (chart) {

        $('#btn').toggle(function() {

            $('.datalabel').hide();
        }, function() {
            $('.datalabel').show();
        });

    });
3
добавлено
Блестяще, довольно простое решение! Ценю вашу помощь :)
добавлено автор Andross, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)