javascript - Chart.js 中的多行标题不起作用

Question

我的 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
                },

            }
        });

但是标题不是两行，文档 here说数组输入将给出多行标题，但它没有明确给出

Answer 1

你的例子应该可以正常工作。确保其余代码的格式也正确。

这是一个工作示例: 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 遮挡。