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

Question

我Chart.js用来在div中显示一个折线图<tr>.

<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>打开整个图表都应该重新绘制,所以我不确定究竟是什么导致了这个.

Answer 1

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

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

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

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

我希望它有帮助。

Answer 2

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

请参阅coinmarketcap.com