Question

我正在制作一个每月显示数据的条形图，但无论我做什么，图表的背景颜色都没有显示。 I can only see the value of the chart when I hover the month

这是代码。

的index.php

<body>

    <div id="chart-container1">
        <canvas id="mycanvas2"></canvas> // I call the bar chart
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.bundle.js"></script>
    <script type="text/javascript" src="js/app2.js"></script>


</body>

data.php

$allMonth = sprintf("SELECT DATENAME(MONTH, a.date) as monthly, MAX(a.kwh) as kwh
                        from tbl_totalMonth a
                        group by DATENAME(MONTH, a.date)");

$allMonthResult = sqlsrv_query($db, $allMonth);

if ($allMonthResult==false) {
    echo "ERROR to retrive info!! <br />";
    die(print_r(sqlsrv_errors(),TRUE));
}

    $data2 = array();

while ($MONTH_RES = sqlsrv_fetch_array($allMonthResult, SQLSRV_FETCH_ASSOC)) {
    $data2[] = $MONTH_RES;
}


print json_encode($data2);

输出：[{“month”：“July”，“kwh”：“400000000.2120”}]

app2.js

$(document).ready(function(){
    $.ajax({
        url:" http://localhost/chart/e/data2.php",
        method: "GET",
        success: function(data2){
            console.log(data2);
            var monthly = [];
            var kwh = [];



            for(var i in data2){
                monthly.push(data2[i].monthly);
                kwh.push(data2[i].kwh);
            }

            var chartdata = {
                labels: monthly,
                datasets : [
                    {
                        label: 'Month',
                        // backgroundColor: 'rgba(134,159,152, 1)',
                        // borderColor: 'rgba(134,159,152, 1)',
                        // hoverBackgroundColor: 'rgba(230, 236, 235, 0.75)',
                        // hoverBorderColor: 'rgba(230, 236, 235, 0.75)',
                        fillColor: "rgba(151,187,205,0.5)",
                        strokeColor: "rgba(151,187,205,0.8)",
                        highlightFill: "rgba(151,187,205,0.75)",
                        highlightStroke: "rgba(151,187,205,1)",
                        data: kwh
                    }
                ]
            };

                var ctx = $("#mycanvas2");

                var barGraph = new Chart(ctx,{

                    type: 'bar',
                    data: chartdata
                });

        },

        error: function(data2) {
            console.log(data2);
        }
    });
});

Answer 1

您需要在图表选项中将 beginAtZero 属性设置为 true 以获取y轴刻度，如下所示：

options: {
   scales: {
      yAxes: [{
         ticks: {
            beginAtZero: true
         }
      }]
   }
}

另外，请确保您使用的是最新版本的ChartJS ^（v2.6.0），

并为数据集使用以下属性：

backgroundColor: 'rgba(134,159,152, 1)',
borderColor: 'rgba(134,159,152, 1)',
hoverBackgroundColor: 'rgba(230, 236, 235, 0.75)',
hoverBorderColor: 'rgba(230, 236, 235, 0.75)',

而不是：

fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t11.json",
      method: "GET",
      success: function(data2) {
         console.log(data2);
         var monthly = [];
         var kwh = [];

         for (var i in data2) {
            monthly.push(data2[i].monthly);
            kwh.push(data2[i].kwh);
         }

         var chartdata = {
            labels: monthly,
            datasets: [{
               label: 'Month',
               backgroundColor: 'rgba(134,159,152, 1)',
               borderColor: 'rgba(134,159,152, 1)',
               hoverBackgroundColor: 'rgba(230, 236, 235, 0.75)',
               hoverBorderColor: 'rgba(230, 236, 235, 0.75)',
               data: kwh
            }]
         };

         var ctx = $("#mycanvas2");

         var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: {
               scales: {
                  yAxes: [{
                     ticks: {
                        beginAtZero: true
                     }
                  }]
               }
            }
         });
      },

      error: function(data2) {
         console.log(data2);
      }
   });
});

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

Answer 2

是否可以使用不同的单位？使用您的大量高精度数字chart.js无法以有意义的方式显示它们。查看此整篇代码段。

＆＃13;

$(document).ready(function() {
  data2 = JSON.parse(JSON.stringify([{
    "monthly": "June",
    "kwh": "478"
  },{
    "monthly": "July",
    "kwh": "500"
  },{
    "monthly": "August",
    "kwh": "487"
  },{
    "monthly": "September",
    "kwh": "467"
  }]));
  console.log(data2);
  var monthly = [];
  var kwh = [];



  for (var i in data2) {
    monthly.push(data2[i].monthly);
    kwh.push(data2[i].kwh);
  }

  var chartdata = {
    labels: monthly,
    datasets: [{
      label: 'Month',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      highlightStroke: "rgba(151,187,205,1)",
      data: kwh
    }]
  };

  var ctx = $("#mycanvas2");

  var barGraph = new Chart(ctx, {
    type: 'bar',
    data: chartdata
  });


});

＆＃13;

<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>

<body>

  <div id="chart-container1">
    <canvas id="mycanvas2"></canvas>
  </div>



</body>

＆＃13;

chart.js中条形图的颜色未显示。我尝试了背景颜色和填充颜色但没有一个工作

2 个答案: