图表.js在调整窗口大小时消失

Chart.js Disappear on Window Resize

本文关键字：小时 消失 窗口 调整 js 图表      更新时间：2023-09-26

我正在使用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>将显示并调用函数在画布中绘制图表。 此函数如下所示：

$(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);
    }   
});

我遇到的问题是，如果我单击div 以显示屏幕大于 767px ((，然后再次单击以隐藏，将屏幕大小调整为小于 767px，然后再次打开 tr，图表消失了。

这是我能找到的唯一使图表消失的情况。 如果我做与上述相反的操作，图表将保留在那里。 如果我让<tr>保持打开状态并调整窗口大小，图表会保持良好状态。

我Responsive设置为 True，当<tr>打开并调整窗口大小时，图表会正确调整大小。

我想我需要在调整窗口大小时重新绘制画布，但是每当打开<tr>时，都应该重新绘制整个图表，所以我不确定究竟是什么原因造成的。

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

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

之后，我只在创建的图表上update()。 实际上，每次创建图表都不会保留在内存中。更新datasets的示例 

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

我希望这是有帮助的。

每次用户调整图表大小时，您都需要获取两个日期之间的数据

查看 coinmarketcap.com

相关文章：