在Chrome 60中，Chart.js画布元素的高度和宽度为负

当用户单击另一个图表中的数据时，我正在使用Chart.js显示一些信息。单击图表1时，将创建3个其他图表，这是有问题的图表。它们在Firefox和Edge中都可以正常工作。仅Chrome显示此行为。一旦我调整了屏幕的大小，图表就会自动调整大小，并且看起来不错。

我看着它，它显示了chrome和z-index的问题，但是似乎没有任何地方。

https://bugs.chromium.org/p/chromium/issues/detail?id=155483

关于会发生什么的任何想法？

机队图表点击事件处理程序

//EVENT HANDLERS
$("#fleetSummaryChart").on('click', function (evt) {
    var activeBars = fleetSumChart.getElementsAtEvent(evt);
    var label = activeBars[0]._view.label;
    var tempArr = label.split('(');
    var station = tempArr[0].trim();
    var unit = tempArr[1].replace(')', '').trim();

    stationunit_selected = findIndexByKeyValue(stationUnitDetails, 'StationName', 'UnitName', station, unit) || 0;

    if (typeof (Storage) !== "undefined") {
        //store the selected unit in session storage for loading data in other pages
        sessionStorage.setItem('stationUnitDetails',JSON.stringify(stationUnitDetails[stationunit_selected]));
    }

    setUnitDetails();
    refreshDoughnuts(); <---- THIS IS WHERE THE CHARTS ARE BEING CREATED

    $("#unitDetailsContainer").show();
    $("#rTripContainer").show();
    $("#tTripContainer").show();
    $("#derateContainer").show();

    //THE LINES BELOW WHERE ADDED AND I BELIEVE THIS CORRECTED THE ISSUE


   derateFunctionCht.chart.width = 0;
   reactorTripFunctionCht.chart.width = 0;
   turbineTripFunctionCht.chart.width = 0;

   derateFunctionCht.resize();
   reactorTripFunctionCht.resize();
   turbineTripFunctionCht.resize();

});

function refreshDoughnuts() {
    var tTripsData = getTurbineTripChartData();
    var rTripsData = getReactorTripChartData();
    var drateData = getDerateChartData();

    if((typeof turbineTripFunctionCht === "object") && (turbineTripFunctionCht !== null)){
        turbineTripFunctionCht.destroy();
    }   

    if((typeof reactorTripFunctionCht === "object") && (reactorTripFunctionCht !== null)){
        reactorTripFunctionCht.destroy();
    }
    if((typeof derateFunctionCht === "object") && (derateFunctionCht !== null)){
       derateFunctionCht.destroy();
    }

    turbineTripFunctionCht = new Chart(turbineTripByFunction, {
        type: 'horizontalBar',
        data: tTripsData,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        max: 1,
                        fixedStepSize:0.1
                    }
               }]
            },
            legend: {
                labels: {
                    fontColor: '#000',
                    fontStyle: 'bold',
                    fontSize: 15
                }
            }
        }
    });

    Chart.defaults.global.defaultFontColor = '#000';
    Chart.defaults.global.defaultFontSize = 15;
    //Chart.defaults.global.defaultFontStyle = 'bold';

    reactorTripFunctionCht = new Chart(reactorTripByFunction, {
        type: 'horizontalBar',
        data: rTripsData,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            legend: {
                labels: {
                    fontColor: '#000',
                    fontStyle: 'bold',
                    fontSize: 15
                }
            }
        }
    });

    derateFunctionCht = new Chart(deratesByFunction, {
        type: 'horizontalBar',
        data: drateData,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            legend: {
                labels: {
                    fontColor: '#000',
                    fontStyle: 'bold',
                    fontSize:15
                }
            }
        }
    });

}