Javascript 如何使用yAxisTickFromatting在ngx图表条垂直上制作百分比yAxis？

我目前正在使用NGX图表8.0.2版，特别是垂直条形图

我正在浏览条形图的文档，试图找出如何使用百分比设置x轴刻度的格式

例如：20%30%40%50%等

我在附近挖了一些，发现了这根线

这基本上说明，在将数据传递到yaxistickformatter之前，必须先使用函数格式化数据

我做了一些进一步的挖掘，发现了这个线程，它提供了一个关于如何格式化所述函数的输出的想法

因此，使用这两个工具，我试图创建一个函数，将y轴格式化为百分比

这是我的垂直条形图组件文件

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { tankData } from '../data';

@Component({
selector: 'app-vertical-bar-chart',
templateUrl: './vertical-bar-chart.component.html',
styleUrls: ['./vertical-bar-chart.component.css']
})
export class VerticalBarChartComponent implements OnInit {

view = [700, 400];

// options
showXAxis = true;
showYAxis = true;
gradient = false;
results = tankData;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';

colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

constructor() { 
Object.assign(this, { tankData });
} 



ngOnInit() {
}

}

function percentTickFormatting(val: any): string {
return val.toLacaleString('en-us', {syle: 'percent', 
maximumSignificantDigits: 1});
} 

这是我的垂直条形图html文件

<ngx-charts-bar-vertical
[view] = "view"
[scheme]="colorScheme"
[results]="tankData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel" 
[yAxisTickFormatting] = "percentTickFormatting">
</ngx-charts-bar-vertical>

y轴刻度尚未格式化为百分比。 我确信我很接近，可能我需要将数据文件中的值传递到我所概述的函数中，这样它就可以被格式化并传递到图形中。然而，我不确定如何做到这一点。任何协助都将不胜感激

我在git论坛中找到了答案

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { tankData } from '../data';

@Component({
   selector: 'app-vertical-bar-chart',
   templateUrl: './vertical-bar-chart.component.html',
   styleUrls: ['./vertical-bar-chart.component.css']
})

export class VerticalBarChartComponent implements OnInit {
   view = [700, 400];
   // options
   showXAxis = true;
   showYAxis = true;
   gradient = false;
   results = tankData;
   showLegend = true;
   showXAxisLabel = true;
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';

   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
   };

   constructor() { 
     Object.assign(this, { tankData });
   } 

   ngOnInit() {
   }

   yAxisTickFormatting(value){ 
     return percentTickFormatting(value);
   }

   function percentTickFormatting(val: any) {
     return val.toLocaleString() + '%';
   }
}

其他代码的其余部分可以保持不变，这应该可以工作。您可以用您想要的任何符号替换%符号，它将起作用

最佳

我在git论坛中找到了答案

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { tankData } from '../data';

@Component({
   selector: 'app-vertical-bar-chart',
   templateUrl: './vertical-bar-chart.component.html',
   styleUrls: ['./vertical-bar-chart.component.css']
})

export class VerticalBarChartComponent implements OnInit {
   view = [700, 400];
   // options
   showXAxis = true;
   showYAxis = true;
   gradient = false;
   results = tankData;
   showLegend = true;
   showXAxisLabel = true;
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';

   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
   };

   constructor() { 
     Object.assign(this, { tankData });
   } 

   ngOnInit() {
   }

   yAxisTickFormatting(value){ 
     return percentTickFormatting(value);
   }

   function percentTickFormatting(val: any) {
     return val.toLocaleString() + '%';
   }
}

其他代码的其余部分可以保持不变，这应该可以工作。您可以用您想要的任何符号替换%符号，它将起作用

---

最好的

以防有人还在挣扎。我就是这样做的

<ngx-charts-bar-vertical-2d
  [scheme]="colorScheme"
  [view]="view"
  ...
  [yAxisTickFormatting]="yAxisTickFormattingFn"
  [xAxisTickFormatting]="xAxisTickFormattingFn">
</ngx-charts-bar-vertical-2d>

---

希望这有帮助

以防有人还在挣扎。我就是这样做的

<ngx-charts-bar-vertical-2d
  [scheme]="colorScheme"
  [view]="view"
  ...
  [yAxisTickFormatting]="yAxisTickFormattingFn"
  [xAxisTickFormatting]="xAxisTickFormattingFn">
</ngx-charts-bar-vertical-2d>

希望这有帮助

容易修复

 ngx-charts-bar-vertical {
      text {
        fill: #fff !important; 
      } 
    }

容易解决

 ngx-charts-bar-vertical {
      text {
        fill: #fff !important; 
      } 
    }

---

来自泳道github论坛，具有内联功能

<ngx-charts-line-chart
 [view]="view"
 [xAxisTickFormatting]="xAxisTickFormatting"
>
</ngx-charts-line-chart>

---

来自泳道github论坛，具有内联功能

<ngx-charts-line-chart
 [view]="view"
 [xAxisTickFormatting]="xAxisTickFormatting"
>
</ngx-charts-line-chart>