我正在使用离子框架在Android和Ios环境中开发应用程序。我的应用程序中有一个图表,它是折线图,显示了整个日期时间的连续数据。我为图表使用了Chartjs。折线图在android /网络平台上运行良好,但在ios中失败。有人知道背后的原因吗?非常感谢。
这是参考代码。 this.SBP_line和this.DBP_line是传递到图表的数据。它们是数组格式。例如[{x:“ 2019-03-13 0:19:47”,y:130}]
createLineChart(): void {
// Chart.scaleService.updateScaleDefaults('linear', {
// ticks: {
// min: 0,
// max: 50,
// }
// });
this.lineChartEl = new Chart(this.lineChart.nativeElement, {
type: 'line',
data: {
// labels: this.datetime,
datasets: [{
label: 'Systolic Blood Pressure',
data: this.SBP_line,
duration: 2000,
easing: 'easeInQuart',
backgroundColor: "red",
borderColor: 'red',
hoverBackgroundColor: this.chartHoverColours,
fill: false,
pointRadius: 5,
pointHoverRadius: 10,
},
{
label: 'Diastolic Blood Pressure',
data: this.DBP_line,
duration: 2000,
easing: 'easeInQuart',
backgroundColor: "green",
borderColor: 'green',
hoverBackgroundColor: this.chartHoverColours,
fill: false,
pointRadius: 5,
pointHoverRadius: 10,
}
]
},
options: {
hover: {
mode: null
},
pan: {
// Boolean to enable panning
enabled: false,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'x'
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: false,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'x',
limits: {
max: 10,
min: 0.5
}
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
boxWidth: 80,
fontSize: 15,
padding: 0,
labels: {
fontColor: "white",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 18,
beginAtZero: true,
stepSize: 30,
max: 240,
min: 30,
},
gridLines: {
color: 'white',
lineWidth: 1
}
}],
xAxes: [{
type: 'time',
time: {
min: new Date(this.datetime[-1]).getTime(),
max: new Date(this.datetime[0]).getTime(),
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD MMM '
}
},
ticks: {
fontColor: "white",
fontSize: 18,
autoSkip: true
},
gridLines: {
color: 'transparent',
lineWidth: 1
}
}]
}
}
});
}