Question

我正在尝试在angular4应用程序中实现whisker bloxplotchart highchart的工具提示。

我正在尝试应用我编写的自定义管道，但它似乎不适用于高图。在高级图表中是否有不同的方法。我的自定义管道基本上将数千个数字转换为100K，例如数百万到100M等。我已经为自定义管道以及高图组件共享了我的代码

我在我的工具提示中尝试这个但它似乎没有应用..值变为空白{point.high | ShortNumberFormat}

不确定我做错了什么？请在下面找到我的代码。

import { Component, Input } from '@angular/core';
import { ShortNumberFormatPipe } from '@wtw/toolkit';
@Component({
    selector: 'app-box-plot-chart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class BoxPlotChartComponent {
    private _x = new ShortNumberFormatPipe();

    public options: any;
    chart: any;

    @Input() public series: any;
    @Input() public moduleName: string = '';

    constructor() {

        this.options = {

            chart: {
                type: 'boxplot'
            },
            title: {
                text: ''
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: ''
                }, plotLines: false
            },
            tooltip: {
                shared: true,
                useHTML: true,
                headerFormat: '<strong style="font-size:12px;color:{point.color}">{point.key}</strong><br><br><table>',
                pointFormat: '<tr><td  style="font-size:10px;">Maximum: </td>' +
                                 '<td style="font-size:10px;"><b>{point.high |shortNumberFormat}</b></td></tr>' +
                              '<tr><td style="font-size:10px;">Upper quartile: </td>' +
                                 '<td style="font-size:10px;"><b>{point.q1} </b></td></tr>' +
                               '<tr><td style="font-size:10px;">Median: </td>' +
                                 '<td style="font-size:10px;"><b>{point.median} </b></td></tr>' +
                                '<tr><td style="font-size:10px;">Lower quartile: </td>' +
                                 '<td style="font-size:10px;"><b>{point.q3}   </b></td></tr>' +
                                 '<tr><td style="font-size:10px;">Minimum: </td>' +
                                 '<td style="font-size:10px;"><b>{point.low} </b></td></tr>' ,
                footerFormat: '</table>',
                valueDecimals: 0
            },
            series: []
        };
    }

    getInstance(chartInstance): void {
        this.chart = chartInstance;
        if(this.moduleName == 'npv'){
            this.options.tooltip.valueDecimals = 0;
        }

        this.redraw();
    }


    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

    redraw() {
        if (!this.chart) return;
        this.chart.addSeries(this.series);


    }

}

自定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'shortNumberFormat'
})
export class ShortNumberFormatPipe implements PipeTransform {

  transform(number: any, decimals = 0) {

    if (number === null) {
      return;
    }

    number = parseFloat(number);

    if (isNaN(number)) {
      return;
    }

    if (isNaN(decimals)) {
      return;
    }

    const signPrefix = number < 0 ? '-' : '';
    number = Math.abs(number);

    if (number <= 999) { // hundreds
      number = number.toFixed(decimals);
    } else if (number >= 1000 && number <= 999999) {  // thousands
      number = (number / 1000).toFixed(decimals) + 'K';
    } else if (number >= 1000000 && number <= 999999999) { // millions
      number = (number / 1000000).toFixed(decimals) + 'M';
    } else { // billions
      number = (number / 1000000000).toFixed(decimals) + 'B';
    }

    return signPrefix + number;
  }
}

尝试通过图形转换值失败后，我在组件级别尝试了它，但遗憾的是组件不理解字符串，因此它不会渲染图形。如果我对作业进行评论，它会正确呈现。

this.results = this._npvResults.map((result: any) => {
      result.chartSeries.data.forEach(s => {
        s.high = this.shortNumberFormatPipe.transform(s.high,0),
        s.low = this.shortNumberFormatPipe.transform(s.low,0),
        s.median = this.shortNumberFormatPipe.transform(s.median,0),
        s.q1 = this.shortNumberFormatPipe.transform(s.low),
        s.q3 = this.shortNumberFormatPipe.transform(s.q3)

      });
      return createNpvAnalysisResult(result);
    });

Answer 1

你有这个

pointFormat: '<tr><td  style="font-size:10px;">Maximum: </td>' +
                             '<td style="font-size:10px;"><b>{point.high |shortNumberFormat}</b></td></tr>' +
                          '<tr><td style="font-size:10px;">Upper quartile: </td>' +
                             '<td style="font-size:10px;"><b>{point.q1} </b></td></tr>' +
                           '<tr><td style="font-size:10px;">Median: </td>' +
                             '<td style="font-size:10px;"><b>{point.median} </b></td></tr>' +
                            '<tr><td style="font-size:10px;">Lower quartile: </td>' +
                             '<td style="font-size:10px;"><b>{point.q3}   </b></td></tr>' +
                             '<tr><td style="font-size:10px;">Minimum: </td>' +
                             '<td style="font-size:10px;"><b>{point.low} </b></td></tr>' ,

特别指出：

<td style="font-size:10px;"><b>{point.high |shortNumberFormat}</b></td></tr>

这一堆代码图表代码，而不是 Angular code 。

您在 Typescript 中编写Angular代码。在这里，您只需编写一些代码，这些代码将被库处理（或者不是，我真的不知道库，但我们说它已被处理）。

Angular，另一方面，编译代码作为vanilla Javascript。

这意味着一旦您的应用程序构建（或提供），您就无法再更新Angular代码。

在这种情况下，这就是你要做的。您尝试将Angular代码提供给图表。

你不能这样做，它不会起作用。

如果你想让它工作，给它一个原始数字，就像这样。

'<td style="font-size:10px;"><b>' + new ShortNumberFormatPipe().transform(point.high) + '</b></td></tr>' +

Answer 2

您是否在模块中声明了管道？

 import { FileSizePipe } from './filesize.pipe';

 @NgModule({
 declarations: [
 //...
    FileSizePipe ,
 ],
})

export class AppModule {}

https://toddmotto.com/angular-pipes-custom-pipes

无法将自定义管道应用于高图表工具提示值

2 个答案: