我正在尝试弄清楚当我将鼠标悬停/鼠标悬停在我绘制的垂直线注释上时如何添加工具提示:
annotation: {
annotations: [{
"drawTime": "afterDatasetsDraw",
"type": "line",
"mode": "vertical",
"scaleID": "x-axis-0",
"value": "2020-04-01 12:20:27.709523",
"borderWidth": 2,
"borderColor": "red",
"label": {
"content": "Example Content",
"enabled": true,
"position": "top"
},
onMouseover: function(e) {
console.log("I AM GETTING CALLED!");
},
},
谁能解释一下这是如何做到的?
最佳答案
不直接回答您的问题,但您可以通过访问上下文 chart
和 element
( docs )
我用它来更改悬停时的注释样式(在 TypeScript 中):
enter: (context) => {
const id = context.element.options.id!;
((context.chart.options.plugins!.annotation!.annotations as any)[id] as AnnotationOptions).borderColor = 'blue';
context.chart.canvas.style.cursor = 'pointer';
context.chart.update();
},
leave: (context) => {
const id = context.element.options.id!;
((context.chart.options.plugins!.annotation!.annotations as any)[id] as AnnotationOptions).borderColor = 'rgb(255, 99, 132)';
context.chart.canvas.style.cursor = 'default';
context.chart.update();
},
关于javascript - Chart JS Annotations Plugin - 你能创建一个工具提示来伴随注释吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63822315/
相关文章:
asp.net-core - 客户端中的 IdentityServer 4 身份验证事件
vim - Coc-Prettier 没有获取项目或家庭配置
javascript - Sonarqube 不显示安全热点
reactjs - 测试套装因 "SyntaxError: Unexpected token ' e
typescript - Deno 记录器 FileHandler 不写入文件
python - 使用 Enterprise Architect Python API 旋转标签
amazon-web-services - 如何在本地运行和测试Cloud-init?