使用图表中的折线图,该图表最初会加载数据14天,然后用户可以选择另一个时间段,该时间段应自动更新图表,在这种情况下,时间段可以不同,长度也可以不同。
尝试了所有我可以在Google上找到的示例
初始生成
strProdChart1 = 'strProdChart1 = '2019-09-03,2019-09-04,2019-09-05,2019-09-06,2019-09-07,2019-09-08,2019-09-09,2019-09-10,2019-09-11,2019-09-12,2019-09-13,2019-09-14,2019-09-15,2019-09-16,2019-09-17|9,3,3,9,7,4,6,7,9,2,3,6,9,4,3';
';
arrProdChart1 = strProdChart1.split("|");
console.log(arrProdChart1[0]);
console.log(arrProdChart1[1]);
var objProdChart1 = document.getElementById('ProdChart1');
ProdChart1 = new Chart( objProdChart1, {
type: "line",
data: {"labels": arrProdChart1[0].split(","),"datasets": [{"label": "test", "data": arrProdChart1[1].split(",") ,"borderWidth": 1,"backgroundColor": "red"}]},
options: {
color: 'red',
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
动态调用以更新新数据:
function UpdateChart(chartName, aFunction) {
$.ajax({
type: 'POST', //post method
url: 'AnalyticsAPI.asp?', //ajaxformexample url
dataType: "text",
data: {requestParam: aFunction +'|'+ getParam()[0] +'|'+ getParam()[1] +'|43' },
success: function (result, textStatus, jqXHR)
{
data3= result;
data3='2019-09-01,2019-09-02,2019-09-03,2019-09-04,2019-09-05,2019-09-06,2019-09-07,2019-09-08,2019-09-09,2019-09-10,2019-09-11,2019-09-12,2019-09-13,2019-09-14,2019-09-15,2019-09-16,2019-09-17|9,8,9,3,3,9,7,4,6,7,9,2,3,6,9,4,3';
arrData = data3.split("|");
var chartType = chartName.config.type;
chartName.clear();
chartName.config.data.datasets.data = arrData[1].split(",");
chartName.config.data.labels = arrData[0].split(",");
chartName.update();
},
error: function (xhr, ajaxOptions, thrownError) {
// alert(xhr.status);
alert(thrownError);
}
});
};
如您在图像中看到的那样,并且由于动态加载的数据集还包含2个额外的日期,因此图表向左偏移了吗?
谢谢