Question

我正在从后端填充一些数据到chartJS面积图问题是图形为空，其中标签和数据正确正确地呈现，但是直到打开控制台

，图形部分才显示出来

在启动控制台之前

当我启动控制台时，您会看到悬停的数据和标签正在加载，但不是图形。

这是我的前端代码

   var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();
if(dd<10) {
    dd = '0'+dd
} 
if(mm<10) {
    mm = '0'+mm
} 

todayDate =  yyyy + '-' + mm + '-' + dd;
var parts = todayDate.split("-")
var startDateParts = [parts[0],parts[1],'01']
var startDate = startDateParts.join("-")
var totalDaysUntilNow = parseInt(parts[2]);
var step;

if(totalDaysUntilNow < 14){
    step = 1;
}else if(13 < totalDaysUntilNow < 21){
    step = 3;
}else if(20 < totalDaysUntilNow < 31){
    step = 7;
}
var datesToFetch = [];
var day = 1;
for (let i = 0; i < parseInt((totalDaysUntilNow/step)); i++) {
    (day < 10) ? (parsedDate = "0" + day) : (parsedDate = day)
    dateToPush = [parts[0],parts[1],parsedDate].join('-')
    datesToFetch.push(dateToPush)
    day = day + step;
}

var datesArray = [];
var salesAfterReturnsArray = [];
var salesBeforeReturnsArray = [];
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

//Building datesn labels
for (let i = 0; i < datesToFetch.length; i++) {
    var d = new Date(datesToFetch[i])
datesArray.push(monthNames[d.getMonth()] + " " + d.getDate())  


 }

 for (let i = 0; i < datesToFetch.length; i++) {



fetch("http://localhost:3000/areaChart/"+datesToFetch[i]+"/"+datesToFetch[i]).then(response => response.json())
  .then(data => {
    salesAfterReturnsArray.push((parseInt(data.totalSalesAfterReturns)))
    salesBeforeReturnsArray.push((parseInt(data.totalSalesBeforeReturns)))

  })  
 }

console.log(datesToFetch);
console.log(datesArray);
console.log(salesAfterReturnsArray);
console.log(salesBeforeReturnsArray);



function respChart(selector, type, data, options) {
    var draw = Chart.controllers.line.prototype.draw;
    Chart.controllers.line.prototype.draw = function () {
        draw.apply(this, arguments);
        var ctx = this.chart.chart.ctx;
        var _stroke = ctx.stroke;
        ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = 'rgba(0,0,0,0.01)';
            ctx.shadowBlur = 20;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 5;
            _stroke.apply(this, arguments);
            ctx.restore();
        }
    };

    var draw2 = Chart.controllers.doughnut.prototype.draw;
    Chart.controllers.doughnut = Chart.controllers.doughnut.extend({
        draw: function () {
            draw2.apply(this, arguments);
            var ctx = this.chart.chart.ctx;
            var _fill = ctx.fill;
            ctx.fill = function () {
                ctx.save();
                ctx.shadowColor = 'rgba(0,0,0,0.03)';
                ctx.shadowBlur = 4;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 3;
                _fill.apply(this, arguments)
                ctx.restore();
            }
        }
    });

    var draw3 = Chart.controllers.bar.prototype.draw;
    Chart.controllers.bar = Chart.controllers.bar.extend({
        draw: function () {
            draw3.apply(this, arguments);
            var ctx = this.chart.chart.ctx;
            var _fill = ctx.fill;
            ctx.fill = function () {
                ctx.save();
                ctx.shadowColor = 'rgba(0,0,0,0.01)';
                ctx.shadowBlur = 20;
                ctx.shadowOffsetX = 4;
                ctx.shadowOffsetY = 5;
                _fill.apply(this, arguments)
                ctx.restore();
            }
        }
    });

    // get selector by context
    var ctx = selector.get(0).getContext("2d");
    // pointing parent container to make chart js inherit its width
    var container = $(selector).parent();

    // this function produce the responsive Chart JS
    function generateChart() {
        // make chart width fit with its container
        var ww = selector.attr('width', $(container).width());
        var chart;
        switch (type) {
            case 'Line':
                chart = new Chart(ctx, { type: 'line', data: data, options: options });
                break;
            case 'Doughnut':
                chart = new Chart(ctx, { type: 'doughnut', data: data, options: options });
                break;
            case 'Pie':
                chart = new Chart(ctx, { type: 'pie', data: data, options: options });
                break;
            case 'Bar':
                chart = new Chart(ctx, { type: 'bar', data: data, options: options });
                break;
            case 'Radar':
                chart = new Chart(ctx, { type: 'radar', data: data, options: options });
                break;
            case 'PolarArea':
                chart = new Chart(ctx, { data: data, type: 'polarArea', options: options });
                break;
        }
        return chart;
    };
    // run function - render chart at first load
    return generateChart();
}

// generate graph
var lineChart = {
    labels: datesArray,
    datasets: [{
        label: "Sales after return",
        backgroundColor: 'rgba(114, 124, 245, 0.3)',
        borderColor: '#727cf5',
        data: salesAfterReturnsArray
    }, {
        label: "Sales before return",
        fill: true,
        backgroundColor: 'transparent',
        borderColor: "#0acf97",
        borderDash: [5, 5],
        data: salesBeforeReturnsArray
    }]
};

var lineOpts = {
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    tooltips: {
        intersect: false
    },
    hover: {
        intersect: true
    },
    plugins: {
        filler: {
            propagate: false
        }
    },
    scales: {
        xAxes: [{
            reverse: true,
            gridLines: {
                color: "rgba(0,0,0,0.05)"
            }
        }],
        yAxes: [{
            ticks: {
                stepSize: 100000
            },
            display: true,
            borderDash: [5, 5],
            gridLines: {
                color: "rgba(0,0,0,0)",
                fontColor: '#fff'
            }
        }]
    }
};

respChart($("#line-chart-example"), 'Line', lineChart, lineOpts);

// similarily you can create bar chart
respChart($("#bar-chart-example"), 'Bar', barChart, barOpts);

图形未加载，直到打开Chrome中的控制台

0 个答案: