我已经复制了来自这个JSFiddle的代码:https://jsfiddle.net/jyxcodrq/1/尝试获取图表来压缩/响应Safari for iOS。
<div class="container" style="display: none;">
<div class="row" style="margin-bottom: 1px;">
<div class="col s12 l7">
<div style="padding: 10px; padding-left: 0;">
<div style="padding: 10px;">
<canvas id="cloudformation-status-chart" width="200" height="128"></canvas>
</div>
<p style="font-weight: bold; text-align: center; margin-bottom: 1px;">Event duration (in seconds)</p>
</div>
</div>
</div>
</div>
$(document).ready(function(){
new Chart($('#cloudformation-status-chart'), {
type: 'line',
options: {
legend: {
display: false
},
//responsive: false /* works with this */
},
data: {
labels: ['a', 'b', 'c', 'd'],
datasets: [
{
label: 'Stack creation',
fill: true,
lineTension: 0.3,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 3,
pointHitRadius: 10,
data: [30, 40, 20, 50]
}
]
}
});
$('div.container').fadeIn();
});
以下是它的外观截图:
正如您在iOS的Safari中所看到的那样,图表不会压缩并响应,如响应式设计模式预览所示,这是您想要的。
任何人都可以帮助我这样做吗?