Ionic framework 如何始终以图形显示折线图工具提示。?
我正在用angular开发ionic中的chart.js,我正在生成一个图表,它是折线图,我不想在悬停时显示每个点的点和工具提示我想在没有悬停的情况下显示值,我尝试了很多在stackover flow中提到的方法,但都不起作用,所以我想分享我的代码 下面是我的代码Ionic framework 如何始终以图形显示折线图工具提示。?,ionic-framework,chart.js,Ionic Framework,Chart.js,我正在用angular开发ionic中的chart.js,我正在生成一个图表,它是折线图,我不想在悬停时显示每个点的点和工具提示我想在没有悬停的情况下显示值,我尝试了很多在stackover flow中提到的方法,但都不起作用,所以我想分享我的代码 下面是我的代码 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { Chart } from "chart
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { Chart } from "chart.js";
@Component({
selector: 'app-bp',
templateUrl: './bp.page.html',
styleUrls: ['./bp.page.scss'],
})
export class BpPage implements OnInit {
@ViewChild("barCanvas") barCanvas: ElementRef;
private barChart: Chart;
constructor() {}
ngOnInit() {
setTimeout(() =>{
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: "line",
data: {
labels: ["12-Apr", "13-Apr", "14-Apr", "15-Apr", "16-Apr", "17-Apr", "18-Apr"],
datasets: [{
label: "High",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
pointBorderWidth: 10,
pointHoverRadius: 10,
data: [10943, 29649, 6444, 2330, 36694, 10943, 29649],
fill: false,
borderWidth: 3
}, {
label: "Low",
backgroundColor: "#ff3300",
borderColor: "#ff3300",
pointBorderWidth: 10,
pointHoverRadius: 10,
data: [9283, 1251, 6416, 2374, 9182, 9283, 1251],
fill: false,
borderWidth: 3
}]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
},
},
});
},1500);
}
}
要始终显示工具提示,必须遵循与此处所述类似的方法: 您必须为图表定义
showAllTooltips
选项,如下所示:
let barChart = new Chart(this.barCanvas.nativeElement, {
type: "line",
//...
//...
},
options: {
showAllTooltips: true,
//...
}
});
然后必须调用定义showAllTooltips行为的代码
这里是一个工作解决方案的stackblitz
方法configureTooltipBehavior()
是产生这种魔力的原因
这是否回答了您的问题?