Javascript 使用日期范围选择器更新图表JS

我试图根据使用ajax选择的日期和班次更新图表。我的ajax调用返回如下数组：

0   
date    "2017-11-20"
shift   "Day Shift"
availability    100
1   
date    "2017-11-21"
shift   "Day Shift"
availability    63.63636363636363
2   
date    "2017-11-22"
shift   "Day Shift"
availability    63.63636363636363
3   
date    "2017-11-23"
shift   "Day Shift"
availability    63.63636363636363
4   
date    "2017-11-24"
shift   "Day Shift"
availability    14.285714285714285
5   
date    "2017-11-20"
shift   "Night Shift"
availability    67.56756756756756
6   
date    "2017-11-21"
shift   "Night Shift"
availability    67.56756756756756
7   
date    "2017-11-22"
shift   "Night Shift"
availability    67.56756756756756
8   
date    "2017-11-23"
shift   "Night Shift"
availability    67.56756756756756

// on change event
var request;
$('input').on('change', function(event) {
    console.log('changed');
    event.preventDefault();

    // Abort any pending request
    if (request) {
        request.abort();
    }

    var rangeStart = moment($('#daterange').data('daterangepicker').startDate).unix();
    var rangeEnd = moment($('#daterange').data('daterangepicker').endDate).unix();
    var shift = 'all';
    request = $.ajax({
        url: "report_availability.php",
        type: "post",
        data: {
            rangeStart: rangeStart,
            rangeEnd: rangeEnd,
            shift: shift
        }
    });

    request.done(function (response, textStatus){
        drawChart(response); 
    });

    request.fail(function (textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
       console.log('request finished');
    });
});

function drawChart(data) {
    var dates = [];
    var shift1Score = [];
    var shift2Score = [];
    for(var i in data) {
        var found = jQuery.inArray(data[i].date, dates);
        if (found < 0) {
            dates.push(data[i].date);
        }
         if(data[i].shift == 'Day Shift' ) {
            shift1Score.push(data[i].availability);
        } else {
            shift2Score.push(data[i].availability);
        }
     }

    // Destroy the chart if it already exists
    // NOT WORKING
    if(myChart!=null){
        myChart.destroy();
        console.log('destroy');
    }

    var ctx = document.getElementById("myChart").getContext('2d');
    ctx.canvas.height = 50;
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [
            {
                label: "Day Shift",
                backgroundColor: "#3e95cd",
                data: shift1Score
            }, {
                label: "Night Shift",
                backgroundColor: "#8e5ea2",
                data: shift2Score
            }
          ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false
        }
    });
 }

我的javascript如下所示：

0   
date    "2017-11-20"
shift   "Day Shift"
availability    100
1   
date    "2017-11-21"
shift   "Day Shift"
availability    63.63636363636363
2   
date    "2017-11-22"
shift   "Day Shift"
availability    63.63636363636363
3   
date    "2017-11-23"
shift   "Day Shift"
availability    63.63636363636363
4   
date    "2017-11-24"
shift   "Day Shift"
availability    14.285714285714285
5   
date    "2017-11-20"
shift   "Night Shift"
availability    67.56756756756756
6   
date    "2017-11-21"
shift   "Night Shift"
availability    67.56756756756756
7   
date    "2017-11-22"
shift   "Night Shift"
availability    67.56756756756756
8   
date    "2017-11-23"
shift   "Night Shift"
availability    67.56756756756756

// on change event
var request;
$('input').on('change', function(event) {
    console.log('changed');
    event.preventDefault();

    // Abort any pending request
    if (request) {
        request.abort();
    }

    var rangeStart = moment($('#daterange').data('daterangepicker').startDate).unix();
    var rangeEnd = moment($('#daterange').data('daterangepicker').endDate).unix();
    var shift = 'all';
    request = $.ajax({
        url: "report_availability.php",
        type: "post",
        data: {
            rangeStart: rangeStart,
            rangeEnd: rangeEnd,
            shift: shift
        }
    });

    request.done(function (response, textStatus){
        drawChart(response); 
    });

    request.fail(function (textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
       console.log('request finished');
    });
});

function drawChart(data) {
    var dates = [];
    var shift1Score = [];
    var shift2Score = [];
    for(var i in data) {
        var found = jQuery.inArray(data[i].date, dates);
        if (found < 0) {
            dates.push(data[i].date);
        }
         if(data[i].shift == 'Day Shift' ) {
            shift1Score.push(data[i].availability);
        } else {
            shift2Score.push(data[i].availability);
        }
     }

    // Destroy the chart if it already exists
    // NOT WORKING
    if(myChart!=null){
        myChart.destroy();
        console.log('destroy');
    }

    var ctx = document.getElementById("myChart").getContext('2d');
    ctx.canvas.height = 50;
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [
            {
                label: "Day Shift",
                backgroundColor: "#3e95cd",
                data: shift1Score
            }, {
                label: "Night Shift",
                backgroundColor: "#8e5ea2",
                data: shift2Score
            }
          ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false
        }
    });
 }

//关于更改事件
var请求；
$（'input'）。关于（'change'，函数（事件）{
console.log（'changed'）；
event.preventDefault（）；
//中止任何挂起的请求
如果（请求）{
request.abort（）；
}
var rangeStart=moment（$（'#daterange'）.data（'daterangepicker'）.startDate.unix（）；
var rangeEnd=moment（$（'#daterange'）.data（'daterangepicker'）.endDate.unix（）；
var-shift='all'；
请求=$.ajax({
url:“report_availability.php”，
类型：“post”，
数据：{
rangeStart:rangeStart，
rangeEnd:rangeEnd，
班次：班次
}
});
请求完成（功能（响应、文本状态）{
图纸（响应）；
});
request.fail（函数（textStatus，errorshown）{
//将错误记录到控制台
控制台错误(
“发生了以下错误：”+
文本状态，错误抛出
);
});
request.always（函数（）{
log（'request finished'）；
});
});
功能图（数据）{
var日期=[]；
var-shift1得分=[]；
var shift2Score=[]；
用于（数据中的var i）{
var found=jQuery.inArray（数据[i]。日期，日期）；
如果（发现<0）{
dates.push（数据[i].date）；
}
如果（数据[i].shift==“白班”）{
shift1Score.push（数据[i].可用性）；
}否则{
shift2Score.push（数据[i].可用性）；
}
}
//如果图表已经存在，请销毁它
//不起作用
如果（myChart！=null）{
myChart.destroy（）；
console.log（'destroy'）；
}
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
ctx.canvas.height=50；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：日期，
数据集：[
{
标签：“白班”，
背景色：“3e95cd”，
数据：1分
}, {
标签：“夜班”，
背景色：“8e5ea2”，
数据：得分
}
]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
回答：是的，
MaintaintAspectRatio:false
}
});
}

我对此有两个问题：

问题1：图表没有被销毁，所以当我重新绘制它时，它只是在旧图表的顶部重新绘制，这会导致悬停事件出现问题。我曾尝试使用chart.update（）解决此问题，但这似乎只是添加到原始数据中，而不是替换它

编辑：-我已通过移除画布然后创建新画布解决了问题1：-

$('#myChart').remove();
$('#chartBar').append('<canvas id="myChart"></canvas>');

$（“#myChart”）.remove（）；
$（'#chartBar'）。附加（''）；

问题2：有两个以上的班次。。有时高达5，我不想硬编码所有这些。我想根据数组中返回的移位数绘制每个数据集，我愿意在php或javascript中更改数组结构，但似乎无法确定正确的数组结构或如何为图表构建动态数据集数组

图表应按如下方式输出两班：

---

任何帮助都会很好的，谢谢

我和你有同样的问题

为了更新图形，我使用了两个函数：

删除当前图形中的所有数据集：

function removeDataset(chart) {
   chart.data.datasets = [];
};

将新数据集添加到图形中：

function addDataset(chart, name, data, background, border, fill) {
    var newDataset = {
        label: name,
        data: [],
        backgroundColor: background,
        borderColor: border,
        fill: fill
    };
    for (var index = 0; index < data.length; ++index) {
        newDataset.data.push(data[index]);
    }
    chart.data.datasets.push(newDataset);
};

要声明该图，我使用：

var ctx1;
$(document).ready(function () {
    var canvas1 = $("#canvas1")[0];   
    canvas1.height = "300";             
    ctx1 = new Chart(canvas1, config_ctx1);
});

---

我希望能有帮助。

谢谢你的回复，这看起来不错，但是当我试过后，我无法让它工作，可能是我太累了。我将稍后再试，感谢我已再次尝试并使其工作，但前提是我不删除轴标签。如果我删除轴标签并尝试推送新标签，似乎会将它们全部合并在一起，而不是添加x个标签。。您对此有解决方法吗？我已经解决了标签问题，将数组中的每个项目分别推送，而不是推送整个数组。