ChartJs中的默认值设置为空

时间:2019-07-16 15:32:32

标签: javascript jquery chart.js

我使用ChartJS来显示公司的CA,但是我有一个错误:表格示例我为16-07-2019和25-07-2019设置了后端数据..日期值介于16-07-2019和25-07之间-2019为空,并且图表仅针对16-07-2019和25-07-2019进行初始化...我的问题是如何将值设置为0(如果为空且显示日期)

代码:

function initCharts(date){
            var datas = [];
            if(date){
                var dateUse = date;
                var secondDate = new Date($('#endDateOfChart').val());
                var diffDays = differenceBetweenDays(dateUse, secondDate);
            } else {
                var date = new Date();
                var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                var diffDays = differenceBetweenDays(firstDay, date);
                var dateUse = firstDay;
            }
            var numberDays = [];
            for(var i =0; i <= diffDays;i++){
                numberDays.push(newDateString(dateUse, i));
            }
            console.log(numberDays);

            var ctx = $('.blog-overview-users');
            var color = Chart.helpers.color;
            return new Chart(ctx, {
                type: 'line',
                data: {
                    labels: numberDays,
                    datasets: [{
                        label: 'CA Marypop',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.red,
                        fill: false,
                        data: [],
                    }]
                },
                options: {
                    title: {
                        text: 'CA Marypop'
                    },
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                parser: 'YYYY-MM-DD',
                                tooltipFormat: 'll',
                                unit: 'day',
                                unitStepSize: 1,
                                displayFormats: {
                                    'day': 'YYYY-MM-DD'
                                }
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Date'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'value'
                            },


                        }]
                    },
                }
            });
        }

        function changeDatasChart(date){
            myChart = initCharts(date);
            $.ajax({
                url: Routing.generate('admin.get.sales'),
                success: function(data) {
                    console.log(myChart.data);
                    data.forEach((data) => {
                        myChart.data.datasets[0].data.push({x:data['x'],y:data['y']});
                    });
                    myChart.update();
                }
            });
        }

屏幕截图:

enter image description here

0 个答案:

没有答案