如何使用 yAxisTickFromatting 使 ngx-Charts Bar 上的百分比 yAxis 垂直？答案

【问题标题】：How to use yAxisTickFromatting to make a percent yAxis on ngx-Charts Bar vertical?如何使用 yAxisTickFromatting 使 ngx-Charts Bar 上的百分比 yAxis 垂直？
【发布时间】：2018-05-31 18:23:11
【问题描述】：

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

我正在查看条形图的文档，并试图弄清楚如何用百分比格式化 x 轴刻度。

示例：20% 30% 40% 50% 等。

我做了一些挖掘，发现了这个线程。

Function for tick-formatting thread

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

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

How to format a percent locale string

因此，我尝试使用这两个工具创建一个函数，将我的 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>

这是我的数据文件：

export const tankData = [
{
 'name': 'Germany',
 'value': 90
},
{
'name': 'USA',
'value': 80
},
{
'name': 'France',
'value': 72
}
];

This is the final result

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

【问题讨论】：

标签： javascript angular ngx-charts

【解决方案1】：

Function formatting

我在 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() + '%';
   }
}

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

最好的

【讨论】：

你必须将它绑定到角度组件。除非你这样做，否则它不会起作用。您的 html 中的 [yAxisTickFormatting]="yAxisTickFormatting" 或代码中的选项中的类似内容

【解决方案2】：

轻松修复

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

【讨论】：

【解决方案3】：

如果有人还在挣扎。我就是这样做的

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

然后

export class D3BarComponent{
  public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
  public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
  yAxisTickFormatting(value) {
    return value + "%" // this is where you can change the formatting
  }
  xAxisTickFormatting(value) {
    return value + "%" // this is where you can change the formatting
  }
}

希望对您有所帮助！

【讨论】：

【解决方案4】：

来自泳道 github 论坛，带有内联函数

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

组件

export class MyComponent  implements OnInit {
  xAxisTickFormatting = (value) => `${value.toString()}`;

【讨论】：