0

我目前正在使用 NGX-Charts 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>

这是我的数据文件：

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

这是最终结果

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

4

4 回答 4

5

函数格式化

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

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

最好的

于 2018-05-31T20:05:30.753 回答
2

轻松修复

 ngx-charts-bar-vertical {
      text {
        fill: #fff !important; 
      } 
    }
于 2020-04-30T06:33:32.967 回答
0

以防万一有人还在挣扎。这就是我的做法

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

希望这有帮助！

于 2019-08-04T14:51:36.110 回答
0

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

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

零件

export class MyComponent  implements OnInit {
  xAxisTickFormatting = (value) => `${value.toString()}`;
于 2020-07-26T00:48:23.533 回答