ChartJsのタイトルが表示されない

Question

ChartJSバージョン2.6.0を使用しています。私はチャートの 'タイトル'オプションでいくつかの困難を抱えています。レンダリングされたチャートには表示されません。 私は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); 

しかし、タイトルだけで文句を言わないショー。同じ問題を抱えているdougnutチャートのあるfiddleがあります。私はここで何が欠けていますか？

Answer 1

あなたがchartjs:title

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', 
 
    options: { 
 
    title: { 
 
     display: true, 
 
     text: 'TEST' 
 
    } 
 
    }, 
 
    data: { 
 
    labels: labels, 
 
    datasets: [{ 
 
     data: data, 
 
     backgroundColor: bgColor 
 
    }] 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="400"> 
 
</canvas>

、

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

ここ

すべてのオプションの完全なリストについては、ドキュメントいるようoptionsオブジェクト内titleオブジェクトをラップする必要がありますhttps://jsfiddle.net/unf4exa2/

Answer 2

titleプロパティは、optionsという別のプロパティの中に来る必要があります。これを試して。

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

hereの例も確認できます。

Answer 3

JSFiddleでは、optionsを追加するのを忘れました。ドキュメントの

例は次のとおりです。

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

このフィドルを参照してください：https://jsfiddle.net/ha19ozqy/90/

Answer 4

をオプションを追加してみてくださいタイトル

https://jsfiddle.net/Jaffreena/ha19ozqy/93/

するvarデータ= [2137680、のために内部のオブジェクト6282693号、805566号、2568163号、598599号、3189284号、599112号、926340号、5548295号、11847685号、66445号; var labels = ["管理"、 "財務"、 "人事"、 "ビジネス開発とマーケティング"、 "情報技術"、 "専門的な開発とトレーニング"、 "知識管理"、 "物流" "ビジネスサービス"、 "その他"]; var bgColor = ["＃878BB6"、 "＃FFEA88"、 "＃FF8153"、 "＃4ACAB4"、 "＃c0504d"、 "＃8064a2"、 "＃772c2a"、 "＃f2ab71"、 "＃2ab881" "＃4f81bd"、 "＃2c4d75"];

var ctx = document.getElementById（ "myChart"）; VARのmyChart =新しいグラフ（CTX、{ タイプ： 'ドーナツ'、

data: { 

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

}）。