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可能会遮盖标题的一行。

Answer 2

确保您使用的是Chart.js 2.7.0或更高版本。

Chart.js version 2.6.0没有此功能。

Chart.js version 2.7.0可以。

chart.js中的多行标题不起作用

2 个答案: