javascript - Chart.js Canvas 元素在 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 创建 Canvas 后立即手动调整 Canvas 大小，但很难确定，除非您提供负责初始化图表的代码。