Chart.js 제목이 표시되지 않습니다.

Question

XML 데이터를 기반으로 그래프를로드하려고합니다. 내 대본과 모든 것이 잘 작동한다. 문제는 각 그래프에 대해 제목이 있어야합니다. 제목이 전혀 표시되지 않습니다. for 루프 내에서 동적으로 convas를 만든 다음 HTML 페이지가 호출 될 때 Labels 및 Values가 시작됩니다. 누락 된 부분은 각 그래프의 제목입니다. 어떤 육체가 어떤 생각을 가지고 있습니까?

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

글쎄, 내 코드에 내 문제를 찾을 수 없습니다. 그러나 나는 그것을 다른 방식으로 썼다.

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);