Question

我正在使用带有角度的离子的chart.js进行工作，我正在生成一个折线图，我不想显示每个点的点并在悬停时显示工具提示我想始终显示值而不悬停，我尝试过在stackoverflow上也提到了很多方法，但是它们都不起作用，所以我想分享我的代码

以下是我的代码

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

  }



  
}

Answer 1

要始终显示工具提示，必须遵循与此处所述类似的方法：Chart.js v2: How to make tooltips always appear on pie chart?

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

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

     //...

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

      //...
    }
});

然后您必须调用定义showAllTooltips行为的代码。

这是正在解决的解决方案。

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

https://stackblitz.com/edit/angular-ivy-fzpyva

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

1 个答案: