无法将自定义管道应用于高图表工具提示值 [英] Unable to apply custom pipe to high chart tooltip values
问题描述
我试图在我的angular4应用程序中实现晶须bloxplotchart highchart的工具提示。
我试图应用自己写的自定义管道，但它看起来不像在高层应用这里。在高图表中有没有不同的方法。
我的自定义管道基本上将数字从数千转换为100K，例如百万到数百百万等。我已经分享了自定义管道以及高图组件的代码
我在我的工具提示中试过这个，但它似乎不适用。值已经空白{point.high | ShortNumberFormat}
不知道我在做什么做错了？请在下面找到我的代码。
pre $
从'@ angular / core'导入{Component，Input};
从'@ wtw / toolkit'导入{ShortNumberFormatPipe};
@Component（{
selector：'app-box-plot-chart'，
template：'< chart [options] =options（load）=getInstance（$ event .context）>< / chart>'，
styles：[`
chart {
display：block;
width：100％！important;
padding：0;
}
`]
}）
导出类BoxPlotChartComponent {
private _x = new ShortNumberFormatPipe（）;
公共选项：any;
图：任何;
@Input（）public series：any;
@Input（）public moduleName：string ='';
构造函数（）{
this.options = {
图表：{
类型：'boxplot'
} ，
title：{
text：''
}，
图例：{
启用：false
}，
credits：{
启用：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;> ;最大值：< / td>'+
'< td style =font-size：10px;& gt;< b> {point.high | shortNumberFormat}< / b>< / td>< / tr>'+
'< tr>< td style =font-size：10px ;>上四分位数：< / td>'+
'< td style =font-size：10px;>< b> {point.q1}< / b>< / td>< / tr>'+
'< tr>< td style =font-size：10px;>中值：< / td>'+
'< < / gt>< b>< b> td style =font-size：10px;>低四分位数：< / td>'+
'< td style =font-size：10px;>< b> {point。 q3}< / b>< / td>< / tr>'+
'< tr>< td style =font-size：10px;>最低：< / td> '+
'< td style =font-siz e：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）;
$ b Custom pipe
$ b
从'@ angular / core'导入{Pipe，PipeTransform};
@Pipe（{
name：'shortNumberFormat'
}）
export class ShortNumberFormatPipe implements PipeTransform {
transform（number：any ，小数= 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）{//数百
number = number.toFixed（小数）; （数字> = 1000&& number< = 999999）{//千美元b $ b数字=（数字/ 1000）.toFixed（小数）+'K';
} else if（number> = 1000000&& number< = 999999999）{//百万
number =（number / 1000000）.toFixed（decimals）+'M';
} else {//数十亿美元b $ b number =（number / 1000000000）.toFixed（decimals）+'B';
}
返回signPrefix +数字;
在通过图形转换值失败尝试后，I在组件级别尝试它，但不幸的是组件不理解字符串，因此它不渲染图形。
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）;
}）;
解决方案您有这个
pointFormat：'< tr>< td style =font-size：10px;>最大值：< / td>'+
'< td style =font-size：10px;>< b> {point.high | shortNumberFormat}< / b>< / td>< / tr>'+
' < tr>< td style =font-size：10px;>上四分位数：< / 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;>低四分位数：< / td>'+
'< td style =font -size：10便士x;>< b>< b>< t>< td style =font-size： 10px;>最小值：< / 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代码。
您在打字稿中编写Angular代码。在这里，你只需编写一些代码，这些代码将被库处理（或者不是，我真的不知道这个库，但我们假设它被处理）。
Angular，另一方面，将代码编译为vanilla Javascript。
这意味着一旦您的应用程序被构建（或提供），您就无法再更新Angular代码。
在这种情况下，这就是您要做的。您尝试将Angular代码提供给您的图表。
你不能这样做，它不会起作用。
如果你想让它工作，给它一个原始数字，像这样。
$ b
'< td style =font-size：10px;>< b>'new ShortNumberFormatPipe（） .transform（point.high）+'< / b>< / td>< / tr>'+
I am trying to implement the tooltip for whisker bloxplotchart highchart in my angular4 application.
I am trying to apply the custom pipe that i have written but it doesnt seem to apply here in highcharts. Is there a different way of doing it in high charts.
My custom pipe basically converts numbers that are in thousands to 100K for example and millions to 100M etc. I have shared my code for the custom pipe as well as highchart component
I am trying this in my tooltip but it doesnt seem to apply.. The value is coming blank {point.high |ShortNumberFormat}
Not sure what i am doing wrong ? Please find my code below.
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);
}
}
Custom pipe
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;
}
}
After failed attempts of transforming the values via graph, I tried it at the component level but unfortunately the component doesnt understand string so it doesnt render the graph. If i comment the assignment it renders correctly.
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);
});
解决方案 You have this
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>' ,
Particulary this point :
<td style="font-size:10px;"><b>{point.high |shortNumberFormat}</b></td></tr>
This bunch of code is the chart code, not Angular code.
You write your Angular code in Typescript. Here, you just write some code that will be processed (or not, I don't really know the library, but let's say it is processed) by the library.
Angular, on the other side, compiles your code as vanilla Javascript.
This means that once your applicatoin is built (or served), you can't update the Angular code anymore.
In this case, that is what you are trying to do. You try to give Angular code to your chart.
You can't do that, it won't work.
If you want to make it work, give it a raw number, like this.
'<td style="font-size:10px;"><b>' + new ShortNumberFormatPipe().transform(point.high) + '</b></td></tr>' +
这篇关于无法将自定义管道应用于高图表工具提示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
