ionic-framework - 如何始终以离子角度显示折线图工具提示？

Question

我正在使用带角度的离子处理chart.js，我正在生成一个折线图图表，我不想为每个点显示点并在悬停时显示工具提示我想在没有悬停的情况下始终显示值，我尝试了很多方法在 stackover flow 中也提到了，但它们都没有工作，所以我想分享我的代码

以下是我的代码

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);

  }



  
}

标签： ionic-frameworkchart.js

Answer 1

要始终显示工具提示，您必须遵循类似于此处描述的方法：Chart.js v2：如何使工具提示始终出现在饼图上？

您必须为图表定义showAllTooltips如下选项：

let barChart = new Chart(this.barCanvas.nativeElement, {
    type: "line",

     //...

     //...
    },
    options: {
      showAllTooltips: true,

      //...
    }
});

并且您必须调用定义 showAllTooltips 行为的代码。

这是工作解决方案的堆栈闪电战。

方法configureTooltipBehavior()是负责魔法的方法。

https://stackblitz.com/edit/angular-ivy-fzpyv​​a