Chartjs,使用时间刻度更改数据集和具有不同大小的标签

时间:2019-09-17 11:18:46

标签: javascript charts

使用图表中的折线图,该图表最初会加载数据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);
      }
    });
};

Initial period from 2019-09-03 to 2019-09-17

new period from 2019-09-01 to 2019-09-17, two days longer 如您在图像中看到的那样,并且由于动态加载的数据集还包含2个额外的日期,因此图表向左偏移了吗?

谢谢

0 个答案:

没有答案