Многострочный заголовок в chart.js не работает - PullRequest
0 голосов
/ 22 января 2019

У меня есть заголовок chat.js как

 new Chart(document.getElementById(z).getContext('2d'), {

            type: 'doughnut',
            data: {
                datasets: [{
                    backgroundColor: $scope.bgColor,
                    data:  [
                      some stuff
                    ]
                }],
                 labels: [some stuff],

            },
            options: {
                title: {
                    display: true,
                    text: ['Title Line One', 'Title Line Two']
                },

                cutoutPercentage: 80,
                hover: {mode: null},
                elements: {
                    center: {
                        text:  [
                           some stuff ],
                        color: '#FF6384', // Default is #000000
                        fontStyle: 'Arial', // Default is Arial

                    }
                },
                legend: {
                    display: false
                },

            }
        });

, однако заголовок не состоит из двух строк, документация здесь говорит, что вход массива даст многострочный заголовок, которыйэто явно не дает

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Убедитесь, что вы используете Chart.js версии 2.7.0 или выше.

Chart.js версии 2.6.0 не имеет этой функции.

Chart.js версии 2.7.0 делает.

0 голосов
/ 22 января 2019

Ваш пример должен работать нормально.Убедитесь, что остальная часть кода также правильно отформатирована.

Вот рабочий пример: https://codepen.io/ItsT-Mo/pen/rPNrGm (заголовок определен в строке 12)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [{
            label: 'Testdata',
            data: [1, 2, 3]
        }]
    },
    options: {
        title: {
            display: true,
            text: ['Title Line One', 'Title Line Two']
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Еслиэто все еще не работает, проверьте страницу и убедитесь, что обе строки находятся в DOM.Если они показаны, но не оба, то одна строка заголовка может быть скрыта каким-то CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...