莫里斯条形图(错误：<rect>属性宽度:负值无效。("-0.2634408602150538")在第一个点击im得到这样的

Question

​

在第一个点击中，我的图表没有显示(但是有数据)，

更改加载n显示的日期后，从过去的3天开始，我试图修复此问题，但无法修复。

<div class="box box-success barchart">
            <div ng-show="dataFound" class="box-body chart-responsive">
                <div class="y-axis"><text ng-show="isBarShowing" id="y-axis" class="axis">Inverter Capacity kWh &#x2192;</text></div>
                <div class="chart" id="bar-chart">
                </div>
            </div>
            <div id="x-axis" ng-show="isBarShowing"><text class="axis">Inverters &#x2192;</text></div>
        </div>

js文件

函数generateMultipleBarValues() {

    var data = $scope.data;

    var timeKeys = [];
    var tempMap = [];
    barData = [];

    for (var i = 0; i < data.length; i++) {
        var datum = data[i];
        var timeKey = datum.TimeofReading.split(' ')[0];
        if (timeKeys.indexOf(timeKey) == -1) {
            timeKeys.push(timeKey);
        }
    }
    for (var i = 0; i < timeKeys.length; i++) {
        for (var j = 0; j < data.length; j++) {
            var time = data[j].TimeofReading.split(' ')[0];
            if (timeKeys[i] == time) {
                if (typeof tempMap[time] == 'undefined') {
                    tempMap[time] = { date: time };
                    tempMap[time]['Inv ' + data[j].InverterId] = data[j].Readingby;
                } else {
                    tempMap[time]['Inv ' + data[j].InverterId] = data[j].Readingby;
                }
            }
        }
        barData.push(tempMap[timeKeys[i]]);
    }


    if (barData.length == 0) {

        $('#bar-chart').hide();
        $scope.isBarShowing = false;
        $scope.viewDisabled = true;
        $scope.dataFound = false;
        return;

    } else {
        $('#bar-chart').show();

        timeKeys = [];
        tempMap = [];
        console.log(JSON.stringify(barData));
        generateBarChart(barData);
        barData = [];
        $scope.dataFound = true;
        $scope.isBarShowing = true;
        $scope.viewDisabled = false;
        $scope.dataFound = true;
    }
    }

// generate barchart

function generateBarChart(barData) {
    var keyNames = Object.keys(barData[0]);
    var keys = [];
    for (var i = 1; i < keyNames.length; i++) {
        keys.push('Inv ' + i);
        for (var j = 0; j < barData.length; j++) {
            barData[j][keys[i - 1]] = barData[j][keyNames[i]];
            delete barData[j][keyNames[i]];
        }
    }
    console.log(JSON.stringify(keys));
    console.log(JSON.stringify(barData));
    $('#bar-chart').empty();
    bar = new Morris.Bar({
        element: 'bar-chart',
        data: barData,
        xkey: 'date',
        ykeys: keys,
        labels: keys,
    });
    keys = [];

}

在这里，每次我在面对负值时改变选择范围时，最初的宽度较小(当我们第一次加载图表时)，但在第二次，它是正确的加载。请帮我解决这个问题..。我的图表在任何时候都能显示吗

Answer 1

请为您的div元素设置宽度。类似宽度:自动或宽度:600 or。

<div class="box box-success barchart">
        <div ng-show="dataFound" class="box-body chart-responsive" style="width:auto; height:350px">
            <div class="y-axis"><text ng-show="isBarShowing" id="y-axis" class="axis">Inverter Capacity kWh &#x2192;</text></div>
            <div class="chart" id="bar-chart">
            </div>
        </div>
        <div id="x-axis" ng-show="isBarShowing"><text class="axis">Inverters &#x2192;</text></div>
    </div>