Question

我正在尝试使用Angular cli app上的ng2-charts来优化我的图表。一般来说，一切都运行得很好，唯一没有的是悬停线跟踪数据点。这是我尝试制作的理想图表模型，我也尝试遵循其代码：

https://stackblitz.com/edit/line-chart?file=app%2Fapp.component.ts

但是，当我将鼠标悬停在我的图表上时，只会显示工具提示。

以下是我的代码：

plugin-hoverline.ts :(从以下链接中复制并粘贴，以@GRUNT计算）

https://istack.000webhostapp.com/chartjs-plugin-hoverline.js

banner.component.ts :(图表组件）

import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import './plugin-hoverline';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

  currentDate:string = new Date().toJSON().slice(0,10).replace(/-/g,'-');

  private dataUrl: string = 'historical/close.json?start=2013-09-01&end=' + this.currentDate;

  constructor(    
    private historicalBpiService:HistoricalBpiService
  ) {}

  // lineChart

  public lineChartData:any = [
    { data:[], label: 'BTC' }
  ];

  public lineChartLabels:Array<any> = [];

  public lineChartOptions:any = {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: 0
    },
    lineOnHover: {
     enabled: true,
     lineColor: '#bbb',
     lineWidth: 1
   },
    scales: {
      yAxes: [{
        display: false,
        scaleLabel: {
          display: false,
          labelString: 'USD'
        },
        ticks: {
          //min: 0,
          //max: 5000,
          stepSize: 500,
          display: false,
          mirror: true,
          labelOffset: 7,
          padding: -10,
          callback: function(value, index, values) {
            return '$' + value;
          }
        },
        gridLines: {
          display: true,
          tickMarkLength: 0
        }
      }],
      xAxes: [{
        ticks: {
          display: false,
          mirror: true
        },
        gridLines: {
          display: false,
          tickMarkLength: 0
        }
      }]
    },
    elements: {
      point: {
        radius: 0
      },
      line: {
        tension: 0, // 0 disables bezier curves
      }
    },
    hover: {
      mode: 'nearest',
      intersect: false
    },
    tooltips: {
      mode: 'nearest',
      intersect: false,
      backgroundColor: 'rgb(95,22,21)',
      callbacks: {
        title: function (tooltipItems, data) {
          return (tooltipItems[0] || {})['xLabel'];
        },
        label: function (tooltipItem, data) {
          return '$ ' + tooltipItem.yLabel.toLocaleString();
        },
        labelColor: function(tooltipItem, chart) {
          let dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
          return {
            backgroundColor : dataset.backgroundColor
          }
        }
      }
    }
  };
  public lineChartColors:Array<any> = [
    {
      backgroundColor: 'rgba(199,32,48,0.9',
      borderColor: 'rgb(95,22,21);',
      pointBackgroundColor: 'rgba(218,208,163,0.9)',
      pointHoverBackgroundColor: 'rgba(218,208,163,0.9)',
      pointHoverBorderColor: 'rgb(218,208,163)',
      pointHoverRadius: 5,
      steppedLine: false

    }
  ];
  public lineChartLegend:boolean = false;
  public lineChartType:string = 'line';


  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  ngOnInit(){
    this.historicalBpiService.getBpiData(this.dataUrl)
      .subscribe(
        res => {
          //this.lineChartData = Object.keys(res.bpi).map(function (key) { return res.bpi[key];});
          this.lineChartData[0].data = Object.values(res.bpi);
          this.lineChartLabels = Object.keys(res.bpi);
          //console.log(this.lineChartData,this.lineChartLabels);
        }
      )
  }
}

模板：

<div class="chart">
      <canvas baseChart height="360px"
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
    </div>

Answer 1

使用以下代码尝试：

图表组件

import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import './plugin-hoverline';

@Component({
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

   currentDate: string = new Date().toJSON().slice(0, 10).replace(/-/g, '-');

   private dataUrl: string = 'historical/close.json?start=2013-09-01&end=' + this.currentDate;

   constructor(
      private historicalBpiService: HistoricalBpiService
   ) { }

   // lineChart

   public lineChartData: any = [
      { data: [], label: 'BTC', pointHoverRadius: 5, steppedLine: false }
   ];

   public lineChartLabels: Array<any> = [];

   public lineChartOptions: any = {
      responsive: true,
      maintainAspectRatio: false,
      layout: {
         padding: 0
      },
      lineOnHover: {
         enabled: true,
         lineColor: '#bbb',
         lineWidth: 1
      },
      scales: {
         yAxes: [{
            display: false,
            scaleLabel: {
               display: false,
               labelString: 'USD'
            },
            ticks: {
               //min: 0,
               //max: 5000,
               stepSize: 500,
               display: false,
               mirror: true,
               labelOffset: 7,
               padding: -10,
               callback: function (value, index, values) {
                  return '$' + value;
               }
            },
            gridLines: {
               display: true,
               tickMarkLength: 0
            }
         }],
         xAxes: [{
            ticks: {
               display: false,
               mirror: true
            },
            gridLines: {
               display: false,
               tickMarkLength: 0
            }
         }]
      },
      elements: {
         point: {
            radius: 0
         },
         line: {
            tension: 0, // 0 disables bezier curves
         }
      },
      hover: {
         mode: 'nearest',
         intersect: true
      },
      tooltips: {
         mode: 'nearest',
         intersect: true,
         backgroundColor: 'rgb(95,22,21)',
         callbacks: {
            title: function (tooltipItems, data) {
               return (tooltipItems[0] || {})['xLabel'];
            },
            label: function (tooltipItem, data) {
               return '$ ' + tooltipItem.yLabel.toLocaleString();
            },
            labelColor: function (tooltipItem, chart) {
               let dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
               return {
                  backgroundColor: dataset.backgroundColor
               }
            }
         }
      }
   };
   public lineChartColors: Array<any> = [
      {
         backgroundColor: 'rgba(199,32,48,0.9',
         borderColor: 'rgb(95,22,21);',
         pointBackgroundColor: 'rgba(218,208,163,0.9)',
         pointHoverBackgroundColor: 'rgba(218,208,163,0.9)',
         pointHoverBorderColor: 'rgb(218,208,163)'

      }
   ];
   public lineChartLegend: boolean = false;
   public lineChartType: string = 'line';


   // events
   public chartClicked(e: any): void {
      console.log(e);
   }

   public chartHovered(e: any): void {
      console.log(e);
   }

   ngOnInit() {
      this.historicalBpiService.getBpiData(this.dataUrl)
         .subscribe(
         res => {
            //this.lineChartData = Object.keys(res.bpi).map(function (key) { return res.bpi[key];});
            this.lineChartData[0].data = Object.values(res.bpi);
            this.lineChartLabels = Object.keys(res.bpi);
            //console.log(this.lineChartData,this.lineChartLabels);
         }
         )
   }
}

您应该在pointHoverRadius数组中设置 lineChartData 属性而不是lineChartColors，同时设置 intersect true和hover

的属性为 tooltips

悬停时Chartjs / ng2-charts线不起作用

1 个答案: