莫里斯·巴图（错误： <rect> 属性宽度：负值无效。 （“ -0.2634408602150538”）出现在第一次点击即时通讯中

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元素输入宽度。 例如width：auto或width：600px。

<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>