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

https://graphs2.coinmarketcap.com/currencies/bitcoin/1516240463000/1516326863000/

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

2 个答案: