真机和浏览器呈现的效果不一样的问题

[huangche007]

我在手机上看得效果是这样的

在PC浏览器看到的效果:

代码如下：
mData: { labels: ["2017-09-10", "2017-09-11", "2017-09-12", "2017-09-13", "2017-09-14", "2017-09-15"], datasets: [{ label: '稀土日均价', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } <line-example :data="mData" :options="options" :width="400" :height="200" > </line-example>
为什么会这样，感觉好奇怪

[apertureless]

Okay... that seems like a bug in Chart.js
Can you check if this appear with hex colors like #FFE0E6

Because it looks like iOS Safari does not like the rgba()

[huangche007]

Yeah，When I use like #FFE0E6 ,it works well。

[apertureless]

Okay, then you should report this bug in the Chart.js repo. As it seems to be a bug in the chartjs core.

A quick fix, would be to use hex values instead of rgba()

[huangche007]

Ok I will do this when i finish my work

[apertureless]

👍