未显示Chart.js标题

kgsdhlau 于 2022-10-02 发布在 Chart.js

关注(0)|答案(1)|浏览(160)

我正在尝试加载基于XML数据的图表。我的剧本和一切都运行得很好。只是，问题是对于每个图表，都应该有一个标题。而且标题根本没有显示出来。在for循环中，它动态创建convas，然后在调用HTML页面时启动标签和值。只是缺少的部分是每个图表的标题。有谁知道吗？

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'}},
 });
}})

JavaScript

来源：https://stackoverflow.com/questions/47727720/chart-js-title-is-not-showing

1条答案

按热度按时间

pn9klfpd1#

好吧，我找不到我的代码的问题。然而，我用另一种方式重写了它。

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

赞(0）回复(0）举报 2022-10-02

我来回答

未显示Chart.js标题

1条答案

相关问题

热门标签

最新问答