chartjs 柱形图 加ajax 请求

第一步 div下放置chart          <canvas id="canvas"></canvas> 

 <div class="ok-card-body map-body">
                <canvas id="canvas"></canvas>
                <br />
  </div>

第二步初始化bar chart  无值

  window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
    var color = Chart.helpers.color;
    var barChartData = {
        labels: [@*'January', 'February', 'March', 'April', 'May', 'June', 'July'*@],
        datasets: [@*{
            label: 'Dataset 1',
            backgroundColor: window.chartColors['green'],
            borderColor: window.chartColors['green'],
            borderWidth: 1,
            data: [
                12,
                13,
                33,
                43,
                12,
                23,
                31
            ]
        }, {
            label: 'Dataset 2',
                backgroundColor: window.chartColors['green'],
                borderColor: window.chartColors['green'],
            borderWidth: 1,
            data: [
                12,
                13,
                33,
                43,
                12,
                23,
                31
            ]
        }*@]

    };

    window.onload = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
              
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '南屋北屋有功电能对比图'
                }
            }
        });

    };

第三步 初始化 ajax请求数据

 initCaiji();
    function initCaiji() {

        $.ajax({
            url: '/xxx/xxx/GetEveryHourEnergyData',
            type: 'GET',
            success: function (data1) {
                console.log(data1);
                if (data1.length == 0) {
                    alert("此时辰范围内,没有数据");
                    return;
                }       

                var labhours = data1[0]['hours'];
                //初始化x轴
                for (var i = 0; i < labhours.length; i++) {
                    barChartData.labels.push('时: '+labhours[i]+'点');
                }
               
                //根据数量新建datasets  
                for (var i = 0; i < data1.length; i++) {  
                    var newDataset = {
                        label: '',
                        backgroundColor: '',// color(dsColor).alpha(0.5).rgbString(),
                        borderColor: '',// dsColor,
                        borderWidth: 1,
                        data: []
                    };

                    if (i === 0) //电能表1 柱颜色
                    {
                        var dsColor = window.chartColors['green'];
                        newDataset.backgroundColor = color(dsColor).alpha(0.5).rgbString();
                        newDataset.borderColor = dsColor;

                    } else if (i === 1) //电能表2
                    {
                        var dsColor1 = window.chartColors['yellow'];
                        newDataset.backgroundColor = color(dsColor1).alpha(0.5).rgbString();
                        newDataset.borderColor = dsColor1;
                    }
                    newDataset.label = data1[i]['devname'];  //柱名
                    var engl = data1[i]['lenergy'];
                    for (var index = 0; index < barChartData.labels.length; index++) {
                        newDataset.data.push(parseFloat(engl[index]));
                    }
                    barChartData.datasets.push(newDataset);  
                }
                window.myBar.update();
            }
            , error: function (err) {
                // console.log(err.statusText);
                console.log('异常');
            }

        });
    }

注意: 两个柱子y值为整数时,  由于图用的是相对对比,这样有时不显示坐标0点, 如果两个y值  比如( y=20 柱子1  y=30 柱子2),( y=20 柱子1  y=30 柱子2) 这是两组数据, 四个柱子,很可能会把y=20 作为为实际图中y的初始值. 

于是造成一个错觉, 左侧的柱子显示不出来.这个错觉让我调试了几个小时...如果看左边的y轴,就能理解..