ChartJS ChartJ标题未显示

eh57zj3b 于 2022-11-07 发布在 Chart.js

关注(0)|答案(5)|浏览(180)

我使用的是ChartJS 2.6.0版，我在使用图表的“title”选项时遇到了一些问题。它只是没有显示在呈现的图表上。我按照documentation，并按如下所述传入标题：

var options = {
    type: 'line',
    data: data,
    title: {
        display: true,
        text: 'PLEASE DISPLAY FOR HEAVEN\'S SAKE'
    },
    responsive: true,
    bezierCurve: true,
    legend: {
        display: true,
        labels: {
            fontColor: 'rgb(255, 99, 132)'
        }
    },
    pointHitDetectionRadius: 1,
    events: ['click']
}

var canvas = document.getElementById("chartId");
var ctx = canvas.getContext("2d");
var chart = new Chart(ctx, options);

然而，标题根本不会显示。这里有一个带甜甜圈图的fiddle，也有同样的问题。我在这里遗漏了什么？

chart.js

来源：https://stackoverflow.com/questions/46316208/chartjs-title-not-showing

5条答案

按热度按时间

pjngdqdw1#

您需要将title对象 Package 在options对象内，如

var myChart = new Chart(ctx, {
    type: 'doughnut',
    options: {
        plugins: {
            title: {
                display: true,
                text: 'TEST'
            }
        }
    } 
....

以下是所有选项的完整列表的文档，chartjs:title
第一个
https://jsfiddle.net/unf4exa2/

赞(0）回复(0）举报 2022-11-07

laximzn52#

请尝试在标题中添加选项对象
https://jsfiddle.net/Jaffreena/ha19ozqy/93/

var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',

    data: {

        labels: labels,
        datasets: [{
            data: data,
            backgroundColor: bgColor
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
    }
});

赞(0）回复(0）举报 2022-11-07

wfypjpf43#

您需要将title对象 Package 在plugins对象内，然后将plugins Package 在options内。
版本号：3.7.1

var myChart = new Chart(ctx, {
    type: 'doughnut',
    options: {
      plugins:{
         title: {
            display: true,
            text: 'Title'
            }
        }
    }

这肯定行！

赞(0）回复(0）举报 2022-11-07

7eumitmz4#

您的title属性应该位于另一个名为options的属性内。请尝试以下操作。

options : {
title: {
        display: true,
        text: 'TITLE HERE'
    }
}

您也可以查看一些here示例。

赞(0）回复(0）举报 2022-11-07

e0uiprwp5#

在您的JSFiddle中，您忘记添加options。
文档中的示例为：

options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
        },

看看这把小提琴：https://jsfiddle.net/ha19ozqy/90/

赞(0）回复(0）举报 2022-11-07

我来回答

ChartJS ChartJ标题未显示

5条答案

相关问题

热门标签

最新问答