简体   繁体   English

ChartJs 未显示顶部标签

[英]ChartJs not showing top label

My chartjs not showing label header, but i check all the code, i have nothing wrong, can some1 help me fix it?我的chartjs没有显示标签标题,但我检查了所有代码,我没有错,有人可以帮我解决吗? I already set the legend display : True我已经设置了图例显示:True

Please ignore this the word not engough so i typing something to extend the word dsadasdnakdjakdakdkaldjlasjdladasdasdasdsadsadsadsadasdsa sAFAASD DCSDCAS CDECADA请忽略这个词 not engough 所以我输入一些东西来扩展这个词 dsadasdnakdjakdakdkaldjlasjdladasdasdasdsadsadsadsadasdsa sAFAASD DCSDCAS CDECADA

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>

    <h1 class="header" align="center">Dashboard of Depression</h1>
    <table>
        <tr>
            <td>
            <body>
              <center>
                <h3>{{ title2 }}</h3>
              </center>
              <center>
                <canvas id="chart1" width="500" height="300"></canvas>
                <script>
                  // bar chart data
                  var barData = {
                    labels : [
                      {% for item in label2 %}
                       "{{ item }}",
                      {% endfor %}
                ],

                    datasets : [{
                      label: "Red",
                      fill: true,
                      fillColor: "rgba(196, 93, 105, 0.3)",
                      strokeColor: "rgba(196, 93, 105, 0.3)",
                      pointColor: "rgba(196, 93, 105, 0.3)",
                      data : [
                        {% for item in value2 %}
                           "{{ item }}",
                          {% endfor %}
                    ]
                      },
                      {
                      label: "Blue",
                      fill: true,
                      fillColor: "rgba(151,187,205,0.2)",
                      strokeColor: "rgba(151,187,205,1)",
                      pointColor: "rgba(151,187,205,1)",
                      data : [
                        {% for item in value4 %}
                           "{{ item }}",
                          {% endfor %}
                    ]
                      }
                    ]
                  }

                 // get bar chart canvas
                 var mychart = document.getElementById("chart1").getContext("2d");

                   steps = 10
                   max = {{max4}}

                 // draw bar chart
                 new Chart(mychart).Line(barData, {
                   scaleOverride: true,
                   scaleSteps: steps,
                   scaleStepWidth: Math.ceil(max / steps),
                   scaleStartValue: 0,
                   scaleShowVerticalLines: true,
                   scaleShowGridLines : true,
                   barShowStroke : true,
                   scaleShowLabels: true,
                   xAxes: [{ stacked: true }],
                   yAxes: [{ stacked: true }],
                   legend: {display: true}
                   }
                 );

                </script>
              </center>
            </body>
            </td>
        </tr>
     </table>
<style>
table, th, td {
  border: 1px solid black;
}
</style>

我的图

我想要的是

Solve: Reason of not showing ChartJS.解决:没有显示ChartJS的原因。 The chart.js Is old version. chart.js 是旧版本。 Need to change it to the latest version需要改成最新版本

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM