Question

我目前正在使用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轴刻度尚未格式化为百分比。我确信我很接近可能我可能需要将数据文件中的值传递给我概述的函数，以便可以将其格式化并传递给图形。但是我不确定如何做到这一点。任何援助将不胜感激。

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

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

最佳

Answer 2

以防万一仍然有人在挣扎。这就是我的方法

<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
  }
}

希望这项帮助！

Answer 3

轻松修复

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

Answer 4

从swimlane github论坛开始，具有内联功能

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

组件

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

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

4 个答案: