Chart.js标题未显示

Question

I am trying to load graphs based on XML data. my script and everything works fine. Just, the problem is for each of the graph , there should be a title. and title is not showing up at all. within the for loop it create the convas dynamically, and then Labels and Values are initiating when the HTML page is called. just the missing part is the TITLE of each graph. any body has any idea?

var command = xmlDoc.getElementsByTagName("COMMAND");

for (var commandIndex = 0; commandIndex  < command.length; commandIndex++) {
var canvas = document.createElement('canvas');
canvas.id = "Convas"+commandIndex;
canvas.width = 800;
canvas.style.zIndex = 8;
canvas.style.position = "inherit";
document.getElementById("chartdiv").insertBefore(canvas,document.getElementById
    ("Convas"+commandIndex));
  var barData = {
 labels : [{% for item in labels %}
               "{{item}}",
          {% endfor %}],
datasets : [
   {
        fillColor: "rgba(151,187,205,0.2)",
         strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        bezierCurve : false,
        data : [{% for item in values %}
                  {{item}},
                {% endfor %}]
  }]
}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;

 // get bar chart canvas

 var mychart = 
 document.getElementById("Convas"+commandIndex).getContext("2d");
 steps = 100
 max = 100
 // draw bar chart
  var LineChartDemo = new Chart(mychart).Line(barData, {
      scaleOverride: false,
      scaleSteps: steps,
      scaleStepWidth: Math.ceil(max / steps),
      scaleStartValue: 0,
      scaleShowVerticalLines: false,
      scaleShowGridLines : false,
      barShowStroke : true,
      scaleShowLabels: false,
      bezierCurve: true,
      options: { title: {display: true,text: 'FARShAD'}},
 });
}})

Answer 1

Well, I could not find my problem with my code. however, i re wrote it in another way.

var canvas = document.createElement('canvas');
canvas.id = "Convas"+commandIndex;
canvas.width = 800;
canvas.style.zIndex = 8;
canvas.style.position = "inherit";
  document.getElementById("chartdiv").insertBefore(canvas,document.getElementById("Convas"+commandIndex));

var barData = {
labels : [{% for item in labels %}
              "{{item}}",
          {% endfor %}],
datasets : [
   {
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(241, 14, 75, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(241, 14, 75, 1)",
        backgroundColor: "rgba(241, 14, 75, 1)",
        borderColor: "rgba(241, 14, 75, 1)",
        bezierCurve : false,
        fill: false,
        label: "My First dataset",
        data : [{% for item in values %}
                  {{item}},
                {% endfor %}]
  }]
 }
   var config = {
   type: 'line',
   data: barData,
   options: {
       responsive: true,
       title:{
           display:true,
           text:'Chart.js Line Chart'
       },
       tooltips: {
           mode: 'index',
           intersect: false,
       },
       hover: {
           mode: 'nearest',
           intersect: true
       },
       scales: {
           xAxes: [{
               display: true,
               scaleLabel: {
                   display: true,
                   labelString: 'Month'
               }
           }],
           yAxes: [{
               display: true,
               scaleLabel: {
                   display: true,
                   labelString: 'Value'
               },
               ticks: {
                   min: 0,
                   max: 100,

                   // forces step size to be 5 units
                   stepSize: 5
               }
           }]
       }
   }
 };
  var mychart = 
  document.getElementById("Convas"+commandIndex).getContext("2d");

steps = 100
max = 100
// draw bar cha
  var LineChartDemo = new Chart(mychart, config);