如何解决如何在chart.js中动态移动图表上的点?
所以项目的要求是:
但我无法随着一天中的时间变化而改变这一点 并且也无法剥离网格线,使其显示在负 y 轴上, 如上图所示。 这是我能够做到的:
我想知道如何根据当天的进度移动此图表上的点(在本例中为太阳图标)。 这是我所做的代码:
const data = (canvas) => {
return {
labels: ["6am","1pm","8pm"],datasets: [
{
data: arr,pointBackgroundColor: "rgba(250,250,250)",pointHoverBackgroundColor: "rgba(250,poinTradius: [0,0],pointStyle: ["",sunImage,""]
}
]
};
};
const options = {
responsive: false,maintainAspectRatio: false,legend: {
display: false
},plugins: {
legend: {
labels: {
usePointStyle: true
}
}
},scales: {
yAxes: [
{
ticks: {
display: false,min: -150,max: 500
},gridLines: {
linewidth: 0,zerolinewidth: 0.85
}
}
],xAxes: [
{
distribution: "series",bounds: "ticks",gridLines: {
drawBorder: false,linewidth: 1.2,color: "grey",zerolinewidth: 1,zeroLineColor: "grey"
},ticks: {
source: "data",padding: 15,fontSize: 12,maxTicksLimit: 2
}
}
]
},tooltips: {
enabled: false
},};
var plugins = [
{
beforeRender: function (x,args,options) {
var c = x.chart;
var dataset = x.data.datasets[0];
var yScale = x.scales["y-axis-0"];
var yPos = yScale.getPixelForValue(0);
var gradientFill = c.ctx.createLinearGradient(0,c.height);
gradientFill.addColorStop(0,"#FFD097");
gradientFill.addColorStop(yPos / c.height,"#FFF1E1");
gradientFill.addColorStop(yPos / c.height,"#66696E");
gradientFill.addColorStop(1,"#66696E");
var model =
x.data.datasets[0]._Meta[Object.keys(dataset._Meta)[0]].dataset
._model;
model.backgroundColor = gradientFill;
model.borderColor = gradientFill;
}
}
];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。