条形图中的所有条形都留在左侧，宽度很小

Question

我正在用非常简单的数据填充条形图。但是无论我做什么，似乎它总是留有很小的宽度。我如何解决这个问题，您能告诉我吗？我还尝试了棒厚度和棒百分比似乎没有任何改变。有什么我可以做的吗？谢谢。

Js部分：

var labels = ["Request for Information", "Product Availability", "Offer Eligibility", "Price Query", "How To Order",
                "Delivery Duration", "Offer Duration", "Product Feature Query", "Delivery Charge", "Order Confirmation"]
var barData=[17076, 16313, 11337, 11000, 6116, 5957, 5590, 4815, 3825, 335]
var tempbackgroundColor=['rgba(192, 57, 43, 1)',
                'rgba(155, 89, 182, 1)',
                'rgba(84, 153, 199, 1)',
                'rgba(69, 179, 157, 1)',
                'rgba(245, 176, 65 , 1)',
                'rgba(236, 240, 241, 1)',
                'rgba(127, 140, 141, 1)',
                'rgba(44, 62, 80, 1)'
            ]

            var dataSets = [];

            for (var i = 0; i < labels.length; i++) {
                var tmp = { data: [] };

                tmp.label = labels[i];
                tmp.borderColor = [tempbackgroundColor[i]];
                tmp.backgroundColor = [tempbackgroundColor[i]];
                tmp.borderWidth = 1;
                tmp.data = [barData[i]];

                dataSets.push(tmp);
            }

            if (data != '') {
                $scope.trendChartLoading = '0';
            }

            showMBSLineChart(this.canvasId, labels, dataSets, "bar", this.area,true,false);

showMBSLineChart函数

var showMBSLineChart = function (canvasId, labels, dataSets, chartType = 'line',xlabelstring="",ticksunitdisplay=true,labeldisplayx=false) {
    var ctxL = document.getElementById(canvasId).getContext('2d');
    var aspratio = 1;
    var ticksdisplay = true;
    var scalelabeldisplayx = false;
    var scalestringx = xlabelstring;
    if (chartType == 'line') {
        aspratio = 1;
        ticksdisplay = ticksunitdisplay;
        scalelabeldisplayx = labeldisplayx;
    } else if (chartType == 'bar') {
        aspratio = 1;
        ticksdisplay = ticksunitdisplay;
        scalelabeldisplayx = labeldisplayx;
    }
    var myLineChart = new Chart(ctxL, {
        type: chartType,
        data: {
            labels: labels,
            datasets: dataSets
        },
        options: {
            responsive: true,
            legend: {
                display: true,
                labels: {
                    boxWidth: 8,
                    fontSize:10
                }
            },
            aspectRatio: aspratio,
            scales: {
                xAxes: [{
                    ticks: {
                        display: ticksdisplay,
                        fontSize: 10
                    },
                    scaleLabel: {
                        display: scalelabeldisplayx,
                        labelString: scalestringx
                    },
                }]
            }
        }
    });

}

Answer 1

在调用showMBSLinechart函数时，仅使用单个数组数据进行调用。像这样

 showMBSLineChart(this.canvasId, ["counts"], dataSets, "bar", this.area,false,true);