动态构建的ChartJ的竖线或竖线从json不与y轴的底部对齐

如何解决动态构建的ChartJ的竖线或竖线从json不与y轴的底部对齐

在动态构建的Chartjs图表中，条或立管的行为异常。 它们不是从y轴的0点开始的，也不是全部都显示出来。

我尝试了这里或其他论坛中发现的各种方法，但没有成功。 请帮忙。

构建它的代码是从json ex ajax到MVC Controller / Action。

chartSetup.jsonDataSets = new List<ChartDataset>();

        ChartDataset jsonDataSets = new ChartDataset
        {
            data = "[408,547,675,534]",label = "Actual",backgroundColor = "#8e5ea2"
        };
        chartSetup.jsonDataSets.Add(jsonDataSets);

        jsonDataSets = new ChartDataset
        {
            data= "[350,447,725,label = "Budgeted",backgroundColor = "red"
        };
        chartSetup.jsonDataSets.Add(jsonDataSets);

如果我对图表的数据集特别进行硬编码，那就没问题了。

var type = 'bar';
var xLabels = ["May","Jun","Jul","Aug","Sept"];
var topTitle = { display: true,text: 'Maintenance Costs',fontStyle: 'bold',fontSize: 18,fontColor: 'white' };

var canvasTyreCostsChart = $("#canvasMaintenanceBar").get(0).getContext("2d");

var datasources = [
        {
            label: "Budgeted",backgroundColor: 'red',data: [133,221,783,1078]
        },{
            label: "Actual",backgroundColor: "#8e5ea2",data: [408,734] 
        }
    ];

    var regionalCountCostBar = new Chart(canvasTyreCostsChart,{
            type: type,data: {
                labels: xLabels,datasets: datasources,},options:
            {
                responsive: true,title: topTitle,legend: { position: 'bottom' },}
        });

但是动态地完成，这些条浮动在y轴的零点上方。 这是代码。

datasources = jsonData['jsonDataSets'];
var dynamicChartCanvas = $("#canvas-" + columnID).get(0).getContext("2d");
    var xLabelsArr = []; 

    $.each(xLabels,function (key,val)
    {
        var rec = xLabels[key];
        xLabelsArr.push(rec['label']);
    });

    var label;
    var backgroundColor;
    var data2 = "";
    var data3 = [];
    var DS = [];
    var dataSource2;

    // Extract the individual elements
    $.each(datasources,val)
    {
        var rec = datasources[key];

        $.each(rec,val)
        {
            if (key == "label")
            {
                label = val;
            }
            if (key == "backgroundColor")
            {
                backgroundColor = val;
            }
            if (key == "data")
            {
                data2 = rec[key];

                var xx = data2.replace("[","").replace("]","").split(",");
                data3.push(xx);
            }
        });

        dataSource2 =
        {
            label: label,backgroundColor: backgroundColor,data: data3,}

        console.log("ds label " + JSON.stringify(label));
        console.log("data3 " + JSON.stringify(data3));

        data3 = [];
        DS.push(dataSource2);       
        
    });

    console.log("DS " + JSON.stringify(DS));

    var tempData2 = {
        labels: xLabelsArr,datasets: DS,};

    var topTitle = { display: true,fontColor: 'white' };

    var chart = new Chart(dynamicChartCanvas,{
        type: type,data: tempData2,options:
        {
            responsive: responsive,}
    });

记录的对象数组：

DS [{"label":"Actual","backgroundColor":"#8e5ea2","data":[["408"," 547"," 675"," 534"]]},{"label":"Budgeted","backgroundColor":"red","data":[["350"," 447"," 725"," 534"]]}]

解决方法

所需的是，通过数据对象中的JSON数组进行进一步的迭代，获取每个值并将其构建为js数组。

            if (key == "data")
            {
                var dataRec = rec[key];
                var jsonData = JSON.parse(dataRec);
                xValuesArray = [];

                for (var i = 0; i < jsonData.length; i++)
                {
                    var value = jsonData[i];
                    xValuesArray.push(value);
                }
            }
        });

        chartDataset =
        {
            label: label,backgroundColor: backgroundColor,data: xValuesArray,}

        chartDatasets.push(chartDataset);