Делаем метки отзывчивыми на графике JS - PullRequest
Новая
       13

Делаем метки отзывчивыми на графике JS

0 голосов
/ 22 мая 2018

Мне трудно сделать ярлыки на оси Y отзывчивыми. Я хочу, чтобы ярлыки перемещались на несколько строк и имели адаптивный размер шрифта, когда места недостаточно. Я использую данные диаграммы.jsбиблиотека для надписей в верхней части HorizontalBar Graph. Кроме того, надписи скрываются из-за внешнего контейнера графика. 

var chart = new Chart('ctx', {
    type: 'horizontalBar',
    data: {
        labels: ["Something something something", "blah blah..", "blah blah..","Something something something"],
        datasets: [{
            data: [6, 87, 56,25,100,65],
            backgroundColor: "#4082c4"
        }]
    },
    options:{
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            datalabels: {
                color: 'black',
                anchor: "end",
                align: "right",
                offset: 20,
                display: function (context) {
                    return context.dataset.data[context.dataIndex];
                },
                font: {
                    weight: 'bold',
                    size: 26
                },
                formatter: Math.round
            }
        },
        legend: {
            "display": false
        },
        tooltips: {
            "enabled": false
        },
        scales: {
            yAxes: [{
                barPercentage: 1.0,
                gridLines: {
                    display: false
                },
                ticks: {
                    fontSize: 20,
                    beginAtZero: true,
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    min: 0,
                    max: 100,
                    stepSize: 20
                }
            }]
        }
    }
    })

Числа в правой части панели также обрезаются. Я хочу, чтобы диаграммабыть в центре по горизонтали. В браузере диаграмма выглядит следующим образом enter image description here - Ссылка на скрипку: - https://jsfiddle.net/24wdpfxL/

1 Ответ

0 голосов
/ 18 сентября 2018

Вы можете сделать это, но это немного хак-у.

Сначала метки данных.В разделе конфигурации datalabels вы можете попробовать что-то вроде: 

            /* Adjust data label font size according to chart size */
            font: function(context) {
                var width = context.chart.width;
                var size = Math.round(width / 32);

                return {
                    weight: 'bold',
                    size: size
                };
            }

При необходимости измените расчет размера.

Для меток оси Y здесь есть ответ здесь , однако, как видно из Chart.js 2.7.0, строка: 

c.scales['y-axis-0'].options.ticks.fontSize

.. должна бытьизменено на: 

c.scales['y-axis-0'].options.ticks.minor.fontSize

( ref )

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

plugins: [{
    /* Adjust axis labelling font size according to chart size */
    beforeDraw: function(c) {
        var chartHeight = c.chart.height;
        var size = chartHeight * 5 / 100;
        c.scales['y-axis-0'].options.ticks.minor.fontSize = size;
    }
}]

Примечание. Для этого необходимо, чтобы для параметра «keepAspectRatio:» было задано значение «истина».

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

Нам также необходимо изменить размер этой области, чтобы она оставалась на постоянном% от общей ширины диаграммы, например 40%, вместо фиксированной ширины пикселя (добавлено в конфигурацию yAxessection): 

        /* Keep y-axis width proportional to overall chart width */
        afterFit: function(scale) {
            var chartWidth = scale.chart.width;
            var new_width=chartWidth*0.4;

            scale.width = new_width;
        }

(Вы можете не заметить это как проблему с вашим исходным примером, так как есть слишком длинная линия, которая, кажется, заставляет ширину оси Y продолжать увеличиваться при увеличении окна.Но когда метки не переполняются, ширина остается постояннойs используется вышеупомянутое.)

Complete jsFiddle: https://jsfiddle.net/0kxt25v3/2/ ( fullscreen )

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

Я также не пытался масштабировать размеры шрифта метки по оси x, но это должно быть достаточно просто, чтобыдобавьте его в раздел beforeDraw:

...