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

Question

当用户点击另一个图表中的数据时，我正在使用 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
                }
            }
        }
    });

}

Answer 1

几周前我在使用 Chart.js 时遇到了类似的问题。对我来说，这是图表选项中的响应选项导致它错误地调整大小。一种解决方案是在使用 jQuery 创建画布后立即手动调整其大小，但除非您提供负责初始化图表的代码，否则很难确定。