highcharts - 移动设备上的引导程序（不渲染导致挂起问题）
问题描述
我想知道这个页面有什么问题https://jsfiddle.net/3r2eo617/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card">
<div class="card-header bg-primary text-white">Record</div>
<div class="row">
<div class="card-body">
<div class="container">
<b>Filename</b><br>acc.dat<br><br>
<b>Time Step</b><br>0.02 s<br><br>
<b>No Points</b><br>2400
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<div id="highchart" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
<div class="form-group">
<div id="highchart2" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
<div class="form-group">
<div id="highchart3" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
</div>
</div>
<pre id="csv_acc" style="display:none">Time,Acceleration
0.000,0.0000
0.020,0.0000
0.040,0.0000
0.060,0.0000
0.080,0.0000
0.100,0.0000
0.120,0.0000
0.140,0.0000
0.160,0.0000
0.180,0.0000
0.200,0.0000
0.220,0.0000
0.240,0.0000
0.260,0.0000
0.280,0.0000
0.300,0.0000
0.320,0.0000
0.340,0.0000
0.360,0.0000
0.380,0.0000
0.400,0.0000
0.420,0.0000
0.440,0.0000
0.460,0.0000
0.480,0.0000
0.500,0.0000
0.520,0.0000
0.540,0.0000
0.560,0.0000
0.580,0.0000
0.600,0.0000
0.620,0.0000
0.640,0.0000
0.660,0.0000
0.680,0.0000
0.700,0.0000
0.720,0.0000
0.740,0.0000
0.760,0.0000
0.780,0.0000
0.800,0.0000
0.820,0.0000
0.840,0.0000
0.860,0.0000
0.880,0.0000
0.900,0.0000
0.920,0.0000
0.940,0.0000
0.960,0.0000
0.980,0.0000
1.000,0.0000
1.020,0.0000
1.040,0.0000
1.060,0.0000
1.080,0.0000
1.100,0.0000
1.120,0.0000
1.140,0.0000
1.160,0.0000
1.180,0.0000
1.200,0.0000
1.220,0.0000
1.240,0.0000
1.260,0.0000
1.280,0.0000
1.300,0.0000
1.320,0.0000
1.340,0.0000
1.360,0.0000
1.380,0.0000
1.400,0.0000
1.420,0.0000
1.440,0.0000
1.460,0.0000
1.480,0.0000
1.500,0.0000
1.520,0.0000
1.540,0.0000
1.560,0.0000
1.580,0.0000
1.600,0.0000
1.620,0.0000
1.640,0.0000
1.660,0.0000
1.680,0.0000
1.700,0.0000
1.720,0.0000
1.740,0.0000
1.760,0.0000
1.780,0.0000
1.800,0.0000
1.820,0.0000
1.840,0.0000
1.860,0.0000
1.880,0.0000
1.900,0.0000
1.920,0.0000
1.940,0.0000
1.960,0.0000
1.980,0.0000
2.000,0.0000
2.020,0.0000
2.040,0.0000
2.060,0.0000
2.080,0.0000
2.100,0.0000
2.120,0.0000
2.140,0.0000
2.160,0.0000
2.180,0.0000
2.200,0.0000
2.220,0.0000
2.240,0.0000
2.260,0.0000
2.280,0.0000
2.300,0.0000
2.320,-0.0000
2.340,-0.0000
2.360,-0.0000
2.380,-0.0000
2.400,-0.0000
2.420,-0.0000
2.440,-0.0000
2.460,0.0000
2.480,0.0000
2.500,0.0000
2.520,0.0000
2.540,0.0000
2.560,0.0000
2.580,0.0000
2.600,-0.0000
2.620,-0.0000
2.640,-0.0000
2.660,-0.0000
2.680,-0.0000
2.700,-0.0000
2.720,-0.0000
2.740,0.0000
2.760,0.0000
2.780,0.0000
2.800,0.0000
2.820,0.0000
2.840,0.0000
2.860,0.0000
2.880,0.0000
2.900,-0.0000
2.920,-0.0000
2.940,-0.0000
2.960,-0.0000
2.980,-0.0000
3.000,-0.0000
3.020,-0.0000
3.040,-0.0000
3.060,0.0000
3.080,0.0000
3.100,0.0000
3.120,0.0000
3.140,0.0000
3.160,0.0000
3.180,0.0000
3.200,0.0000
3.220,0.0000
3.240,0.0000
3.260,0.0000
3.280,0.0000
3.300,-0.0000
3.320,-0.0000
3.340,-0.0000
3.360,-0.0000
3.380,-0.0000
3.400,-0.0000
3.420,-0.0000
3.440,0.0000
3.460,0.0000
3.480,0.0000
3.500,0.0000
3.520,0.0000
3.540,0.0000
3.560,0.0000
3.580,0.0000
3.600,-0.0000
3.620,-0.0000
3.640,-0.0000
3.660,-0.0000
3.680,-0.0001
3.700,-0.0002
3.720,-0.0002
3.740,-0.0002
3.760,-0.0002
3.780,-0.0001
3.800,-0.0001
3.820,-0.0001
3.840,-0.0000
3.860,-0.0002
3.880,-0.0005
3.900,-0.0008
3.920,-0.0005
3.940,-0.0004
3.960,-0.0006
3.980,-0.0002
4.000,0.0005
4.020,0.0005
4.040,-0.0001
4.060,-0.0011
4.080,-0.0016
4.100,-0.0009
4.120,-0.0001
4.140,-0.0004
4.160,-0.0001
4.180,0.0021
4.200,0.0022
4.220,-0.0012
4.240,-0.0038
4.260,-0.0033
4.280,-0.0020
4.300,-0.0023
4.320,-0.0012
4.340,0.0005
4.360,0.0000
4.380,-0.0025
4.400,-0.0056
4.420,-0.0031
4.440,0.0023
4.460,0.0036
4.480,0.0034
4.500,0.0066
4.520,0.0094
4.540,0.0056
4.560,0.0045
4.580,0.0026
4.600,-0.0046
4.620,-0.0077
4.640,0.0004
4.660,0.0105
4.680,0.0014
4.700,-0.0058
4.720,0.0031
4.740,0.0112
4.760,0.0171
4.780,0.0257
4.800,0.0265
4.820,0.0128
4.840,0.0006
4.860,-0.0034
4.880,-0.0020
4.900,0.0090
4.920,0.0003
4.940,-0.0323
4.960,-0.0390
4.980,-0.0281
5.000,-0.0170
</pre>
<pre id="csv_vel" style="display:none">Time,Velocity
0.000,0.0000
0.020,0.0000
0.040,0.0001
0.060,0.0001
0.080,0.0001
0.100,0.0002
0.120,0.0002
0.140,0.0002
0.160,0.0002
0.180,0.0003
0.200,0.0003
0.220,0.0003
0.240,0.0004
0.260,0.0004
0.280,0.0004
0.300,0.0004
0.320,0.0005
0.340,0.0005
0.360,0.0005
0.380,0.0005
0.400,0.0006
0.420,0.0006
0.440,0.0006
0.460,0.0007
0.480,0.0007
0.500,0.0007
0.520,0.0007
0.540,0.0008
0.560,0.0008
0.580,0.0008
0.600,0.0008
0.620,0.0009
0.640,0.0009
0.660,0.0009
0.680,0.0009
0.700,0.0009
0.720,0.0010
0.740,0.0010
0.760,0.0010
0.780,0.0010
0.800,0.0010
0.820,0.0011
0.840,0.0011
0.860,0.0011
0.880,0.0011
0.900,0.0012
0.920,0.0012
0.940,0.0012
0.960,0.0012
0.980,0.0012
1.000,0.0012
1.020,0.0013
1.040,0.0013
1.060,0.0013
1.080,0.0013
1.100,0.0013
1.120,0.0014
1.140,0.0014
1.160,0.0014
1.180,0.0014
1.200,0.0014
1.220,0.0015
1.240,0.0015
1.260,0.0015
1.280,0.0015
1.300,0.0015
1.320,0.0015
1.340,0.0015
1.360,0.0016
1.380,0.0016
1.400,0.0016
1.420,0.0016
1.440,0.0016
1.460,0.0016
1.480,0.0016
1.500,0.0017
1.520,0.0017
1.540,0.0017
1.560,0.0017
1.580,0.0017
1.600,0.0017
1.620,0.0017
1.640,0.0018
1.660,0.0018
1.680,0.0018
1.700,0.0018
1.720,0.0018
1.740,0.0018
1.760,0.0018
1.780,0.0018
1.800,0.0018
1.820,0.0019
1.840,0.0019
1.860,0.0019
1.880,0.0019
1.900,0.0019
1.920,0.0019
1.940,0.0019
1.960,0.0019
1.980,0.0019
2.000,0.0019
2.020,0.0019
2.040,0.0020
2.060,0.0020
2.080,0.0020
2.100,0.0020
2.120,0.0020
2.140,0.0020
2.160,0.0020
2.180,0.0020
2.200,0.0020
2.220,0.0020
2.240,0.0020
2.260,0.0020
2.280,0.0020
2.300,0.0021
2.320,0.0021
2.340,0.0021
2.360,0.0021
2.380,0.0021
2.400,0.0021
2.420,0.0021
2.440,0.0021
2.460,0.0021
2.480,0.0021
2.500,0.0021
2.520,0.0021
2.540,0.0021
2.560,0.0021
2.580,0.0021
2.600,0.0022
2.620,0.0021
2.640,0.0021
2.660,0.0021
2.680,0.0021
2.700,0.0021
2.720,0.0021
2.740,0.0021
2.760,0.0021
2.780,0.0022
2.800,0.0022
2.820,0.0022
2.840,0.0022
2.860,0.0022
2.880,0.0022
2.900,0.0022
2.920,0.0022
2.940,0.0022
2.960,0.0022
2.980,0.0022
3.000,0.0021
3.020,0.0021
3.040,0.0021
3.060,0.0021
3.080,0.0021
3.100,0.0021
3.120,0.0021
3.140,0.0021
3.160,0.0022
3.180,0.0022
3.200,0.0022
3.220,0.0022
3.240,0.0022
3.260,0.0022
3.280,0.0022
3.300,0.0022
3.320,0.0022
3.340,0.0022
3.360,0.0022
3.380,0.0021
3.400,0.0021
3.420,0.0021
3.440,0.0021
3.460,0.0021
3.480,0.0021
3.500,0.0021
3.520,0.0021
3.540,0.0022
3.560,0.0022
3.580,0.0022
3.600,0.0022
3.620,0.0022
3.640,0.0021
3.660,0.0021
3.680,0.0019
3.700,0.0016
3.720,0.0013
3.740,0.0009
3.760,0.0005
3.780,0.0003
3.800,0.0001
3.820,-0.0001
3.840,-0.0002
3.860,-0.0004
3.880,-0.0011
3.900,-0.0024
3.920,-0.0037
3.940,-0.0047
3.960,-0.0057
3.980,-0.0065
4.000,-0.0061
4.020,-0.0052
4.040,-0.0048
4.060,-0.0060
4.080,-0.0086
4.100,-0.0111
4.120,-0.0120
4.140,-0.0124
4.160,-0.0129
4.180,-0.0109
4.200,-0.0065
4.220,-0.0055
4.240,-0.0104
4.260,-0.0175
4.280,-0.0228
4.300,-0.0270
4.320,-0.0305
4.340,-0.0312
4.360,-0.0307
4.380,-0.0332
4.400,-0.0413
4.420,-0.0500
4.440,-0.0508
4.460,-0.0449
4.480,-0.0379
4.500,-0.0279
4.520,-0.0118
4.540,0.0032
4.560,0.0133
4.580,0.0204
4.600,0.0185
4.620,0.0062
4.640,-0.0010
4.660,0.0098
4.680,0.0217
4.700,0.0173
4.720,0.0146
4.740,0.0289
4.760,0.0573
4.780,0.1001
4.800,0.1523
4.820,0.1916
4.840,0.2050
4.860,0.2021
4.880,0.1967
4.900,0.2037
4.920,0.2130
4.940,0.1809
4.960,0.1096
4.980,0.0426
5.000,-0.0024
</pre>
<pre id="csv_dis" style="display:none">Time,Displacement
0.000,0.0000
0.020,0.0000
0.040,0.0000
0.060,0.0000
0.080,0.0000
0.100,0.0000
0.120,0.0000
0.140,0.0000
0.160,0.0000
0.180,0.0000
0.200,0.0000
0.220,0.0000
0.240,0.0000
0.260,0.0001
0.280,0.0001
0.300,0.0001
0.320,0.0001
0.340,0.0001
0.360,0.0001
0.380,0.0001
0.400,0.0001
0.420,0.0001
0.440,0.0001
0.460,0.0002
0.480,0.0002
0.500,0.0002
0.520,0.0002
0.540,0.0002
0.560,0.0002
0.580,0.0002
0.600,0.0003
0.620,0.0003
0.640,0.0003
0.660,0.0003
0.680,0.0003
0.700,0.0003
0.720,0.0004
0.740,0.0004
0.760,0.0004
0.780,0.0004
0.800,0.0004
0.820,0.0005
0.840,0.0005
0.860,0.0005
0.880,0.0005
0.900,0.0006
0.920,0.0006
0.940,0.0006
0.960,0.0006
0.980,0.0007
1.000,0.0007
1.020,0.0007
1.040,0.0007
1.060,0.0008
1.080,0.0008
1.100,0.0008
1.120,0.0008
1.140,0.0009
1.160,0.0009
1.180,0.0009
1.200,0.0009
1.220,0.0010
1.240,0.0010
1.260,0.0010
1.280,0.0011
1.300,0.0011
1.320,0.0011
1.340,0.0012
1.360,0.0012
1.380,0.0012
1.400,0.0012
1.420,0.0013
1.440,0.0013
1.460,0.0013
1.480,0.0014
1.500,0.0014
1.520,0.0014
1.540,0.0015
1.560,0.0015
1.580,0.0015
1.600,0.0016
1.620,0.0016
1.640,0.0016
1.660,0.0017
1.680,0.0017
1.700,0.0018
1.720,0.0018
1.740,0.0018
1.760,0.0019
1.780,0.0019
1.800,0.0019
1.820,0.0020
1.840,0.0020
1.860,0.0020
1.880,0.0021
1.900,0.0021
1.920,0.0022
1.940,0.0022
1.960,0.0022
1.980,0.0023
2.000,0.0023
2.020,0.0024
2.040,0.0024
2.060,0.0024
2.080,0.0025
2.100,0.0025
2.120,0.0026
2.140,0.0026
2.160,0.0026
2.180,0.0027
2.200,0.0027
2.220,0.0028
2.240,0.0028
2.260,0.0028
2.280,0.0029
2.300,0.0029
2.320,0.0030
2.340,0.0030
2.360,0.0030
2.380,0.0031
2.400,0.0031
2.420,0.0032
2.440,0.0032
2.460,0.0033
2.480,0.0033
2.500,0.0033
2.520,0.0034
2.540,0.0034
2.560,0.0035
2.580,0.0035
2.600,0.0035
2.620,0.0036
2.640,0.0036
2.660,0.0037
2.680,0.0037
2.700,0.0038
2.720,0.0038
2.740,0.0038
2.760,0.0039
2.780,0.0039
2.800,0.0040
2.820,0.0040
2.840,0.0041
2.860,0.0041
2.880,0.0042
2.900,0.0042
2.920,0.0042
2.940,0.0043
2.960,0.0043
2.980,0.0044
3.000,0.0044
3.020,0.0045
3.040,0.0045
3.060,0.0045
3.080,0.0046
3.100,0.0046
3.120,0.0047
3.140,0.0047
3.160,0.0048
3.180,0.0048
3.200,0.0048
3.220,0.0049
3.240,0.0049
3.260,0.0050
3.280,0.0050
3.300,0.0051
3.320,0.0051
3.340,0.0051
3.360,0.0052
3.380,0.0052
3.400,0.0053
3.420,0.0053
3.440,0.0054
3.460,0.0054
3.480,0.0054
3.500,0.0055
3.520,0.0055
3.540,0.0056
3.560,0.0056
3.580,0.0057
3.600,0.0057
3.620,0.0057
3.640,0.0058
3.660,0.0058
3.680,0.0059
3.700,0.0059
3.720,0.0059
3.740,0.0060
3.760,0.0060
3.780,0.0060
3.800,0.0060
3.820,0.0060
3.840,0.0060
3.860,0.0060
3.880,0.0060
3.900,0.0059
3.920,0.0059
3.940,0.0058
3.960,0.0057
3.980,0.0056
4.000,0.0054
4.020,0.0053
4.040,0.0052
4.060,0.0051
4.080,0.0050
4.100,0.0048
4.120,0.0045
4.140,0.0043
4.160,0.0040
4.180,0.0038
4.200,0.0036
4.220,0.0035
4.240,0.0033
4.260,0.0031
4.280,0.0027
4.300,0.0022
4.320,0.0016
4.340,0.0010
4.360,0.0004
4.380,-0.0003
4.400,-0.0010
4.420,-0.0019
4.440,-0.0030
4.460,-0.0039
4.480,-0.0047
4.500,-0.0054
4.520,-0.0058
4.540,-0.0059
4.560,-0.0057
4.580,-0.0054
4.600,-0.0050
4.620,-0.0047
4.640,-0.0047
4.660,-0.0046
4.680,-0.0043
4.700,-0.0039
4.720,-0.0036
4.740,-0.0031
4.760,-0.0023
4.780,-0.0007
4.800,0.0018
4.820,0.0053
4.840,0.0092
4.860,0.0133
4.880,0.0173
4.900,0.0213
4.920,0.0255
4.940,0.0294
4.960,0.0323
4.980,0.0338
5.000,0.0342
</pre>
</main>
<footer class="footer py-3 bg-light">
<div class="container text-center">
</div>
</footer>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
Highcharts.chart('highchart', {
chart: {
zoomType: 'x',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_acc').innerHTML
},
yAxis: {
title: {
text: "Acceleration [g]",
}
}
});
Highcharts.chart('highchart2', {
chart: {
zoomType: 'xy',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_vel').innerHTML
},
yAxis: {
title: {
text: "Velcocity [cm/s]",
}
}
});
Highcharts.chart('highchart3', {
chart: {
zoomType: 'xy',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_dis').innerHTML
},
yAxis: {
title: {
text: "Displacement [cm]",
}
}
});
});
</script>
</body>
</html>
从移动设备查看时，尽管可以在桌面设备中正确查看。特别是在运行 Android 操作系统的移动设备中，在最新版本的 Chrome/Brave/Vivaldi 浏览器中总是会导致“无响应症状”。
谁能建议我如何通过移动设备正确访问此页面而不会出现挂起问题？
提前致谢！
PS。从移动设备查看此演示https://www.highcharts.com/demo/line-time-series时存在同样的问题，但对于其他演示则不存在。
解决方案
我看到你试图通过将 boostThreshold 属性设置为 1 来应用 boost 模块。你很接近，在这种情况下，boost 模块将解决这个问题。尽管要使其工作，您需要做两件事 - 首先您需要导入 boost 模块，然后您应该在不同的地方应用 boostThreshold，例如在 plotOptions.line.boostThreshold 或 series.boostThreshold 因为您无法访问它您尝试应用它的地方的属性（数据）。修复这两件事后，我的安卓设备上的一切都运行顺利。
<script src="https://code.highcharts.com/modules/boost.js"></script>
plotOptions: {
line: {
boostThreshold: 1
}
},
文档参考： https ://www.highcharts.com/docs/advanced-chart-features/boost-module
API 参考： https ://api.highcharts.com/highcharts/plotOptions.line.boostThreshold
推荐阅读
- python - 如何通过单击按钮使用 tkinter 更改标签的文本
- java - 泛型类型的 AVRO 模式 - Java
- firebase - 如果我对 id 进行硬编码，为什么我的方法只给我数据？
- python - 如何根据带有列表的条件选择熊猫中的行？
- python - 如何从请求 Metamask 连接的网站中抓取内容
- azure - Kusto 正则表达式查询电子邮件
- matplotlib - matplotlib 分组条颜色变化
- python - 如何在使用 Pandas 中的块读取大型 csv 时过滤数据
- python - 如何让 discord.py 重写机器人在自己的消息中添加表情符号
- arrays - 如何在 C 编程中的 main 函数之外的另一个函数中编辑数组？