自定义Ng2图表的工具提示

时间:2020-07-22 08:52:32

标签: angular typescript angular-material angular9 ng2-charts

我有一个ng2折线图,我想通过在afterlabel中添加动态数据来自定义工具提示。我在数据集中添加了一个工具提示数组,但是由于修改了js图表包,因此出现了构建问题。有人有更好的建议在Angular 9中实现吗? 我的代码是:

public lineChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
spanGaps: true,
maintainAspectRatio: false,
tooltips: {
  mode: 'x-axis',
 callbacks: {
     label(tooltipItem, labels) {
      return Number(tooltipItem.yLabel).toFixed(2);
     },
      afterLabel(tooltipItem, data) {
       const features = data.datasets[0].tooltip;
       const value = '' + features[tooltipItem.index];
       return value;
      }
 }
},
 scales: {
 yAxes: [{
   gridLines: {
     display: false,
     color: '#3a2d4c'
   },
   ticks: {
     beginAtZero: false,
     maxTicksLimit: 5,
     fontColor: 'rgb(109, 150, 186)'
   }
 }],
 xAxes: [{
   gridLines: {
     display: true,
     color: '#3a2d4c'
   },
   ticks: {
     fontColor: 'rgb(109, 150, 186)',
   }
 }],
 },
elements: {
 line: {
   fill: true
 },
 point: {
        radius: 4
    }
}
};

0 个答案:

没有答案
相关问题