javascript - Chart.js 在窗口调整大小时消失

Question

我正在使用 Chart.js在 <tr> 内的 div 中显示折线图.

<tr class="item">...</tr>
<tr class="item-details">
...
    <div class="col-sm-6 col-xs-12 chart-pane">
        <div class="chart-container">
            ...
            <div><canvas id="future-chart"></canvas></div>
        </div>
    </div>
...
</tr>

加载页面时，item-details <tr>被隐藏，点击item <tr>在上面，它将使其显示并调用一个函数在 Canvas 中绘制图表。该函数如下所示:

$(document).on('click', '.item', function(){
    var itemDetails = $(this).closest('tr').next('tr');
    ...
    var canvas = itemDetails.find('#future-chart').get(0);

    if (canvas) {
        ...
        // just setting data here
        var data = { 
            ...
        };
        var options = {
            responsive: true,
            maintainAspectRatio: true
        };  
        var futureChart = new Chart(context).Line(data,options);
    }   
}); 

我遇到的问题是，当屏幕大于767px时，如果我点击div显示()，然后再次点击隐藏，将屏幕调整到小于767px，再次打开tr，图表没了。

这是我能找到的使图表消失的唯一情况。如果我执行与上述相反的操作，图表将保留在那里。如果我离开 <tr>打开并调整窗口大小，图表保持正常。

我有 Responsive设置为 True 并且图表在 <tr> 时正确调整大小已打开，我调整了窗口大小。

我想我需要在调整窗口大小时重新绘制 Canvas ，但是只要 <tr> 就应该重新绘制整个图表。已打开，所以我不确定到底是什么原因造成的。

Answer 1

我遇到了一个问题，在调整窗口大小时，图表消失了。我通过使用新命令只创建一次图表解决了这个问题

this.myChart = new Chart(this.ctx, {
      type: 'line', .....
}

之后，我只对创建的图表执行 update()。事实上，每次创建图表都不会保存在内存中。更新数据集

的示例

this.myChart.data.datasets = datasetsTmp;
this.myChart.update();

希望对你有帮助