Ionic2 charts.js在Ionic3中无法正常工作
在正常的笔记本电脑视图中,我会很好地标记图表,所有的图表点都会出现,但当我在浏览器的moible视图中打开应用程序时,它与屏幕不匹配(如图2所示)。。任何人都可以提出一些解决方法,并在手机屏幕上显示所有要点,比如桌面(全屏)屏幕 在普通桌面视图中 在移动视图中: 这是我的代码:Ionic2 charts.js在Ionic3中无法正常工作,ionic2,chart.js,ionic3,Ionic2,Chart.js,Ionic3,在正常的笔记本电脑视图中,我会很好地标记图表,所有的图表点都会出现,但当我在浏览器的moible视图中打开应用程序时,它与屏幕不匹配(如图2所示)。。任何人都可以提出一些解决方法,并在手机屏幕上显示所有要点,比如桌面(全屏)屏幕 在普通桌面视图中 在移动视图中: 这是我的代码: this.lineChart = new Chart(this.lineCanvas.nativeElement, { type: 'line', data: {
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: this.labels,
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
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: 1,
pointHitRadius: 10,
data: this.priceArr,
spanGaps: true,
}
]
}, options:{
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Price Rise/Fall'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
}
}
});
仔细检查一下,你确定这是真的吗?如果在开发人员控制台仍然打开的情况下刷新页面会怎么样?数据在哪里:this.priceArr,定义了?这两个屏幕截图都显示了看似无意义的数据,当您给它意外的输入时,chart.js有时会表现得有点滑稽。你能尝试一些“简单”的测试吗,比如
数据:[10,20,15,25]
?@misha130,在爱奥尼亚,刷新意味着重新启动整个应用程序。在这一点上,它保持不变,但在更改屏幕大小时,它工作正常。@rory_za数据是正确的。由于更改屏幕大小,图表显示正确。我的意思是,您不应该测试屏幕大小,而应该测试屏幕大小。如果你说你点击了F5(刷新),但它仍然没有被修复,那么这个库就有问题了