HighCharts在创建图形时从自定义html表中删除$和%符号

Question

我已经创建了一个自定义HTML表，我想使用highcharts将其呈现为条形图。但我想显示$或%符号，以明确图表中的数字的含义，因此每个表单元格看起来都是这样的：$23或45%。但是当highcharts图尝试渲染时，我会出现以下错误：https://assets.highcharts.com/errors/14/-发送到series.data的字符串值，应为Number。如何删除$和%符号，使图表即使使用这些符号也能渲染？

这是我当前的图表代码：

onSetUpHighcharts() {
Highcharts.chart('container', {
data: {
table: 'datatable',
endColumn: this.currentReport.columns.length,
endRow: this.currentReport.rows.length - 1
},
exporting: {
enabled: false,
buttons: {
contextButton: {
menuItems: ["printChart",
"separator",
"downloadPNG",
"downloadJPEG",
"downloadPDF",
// "downloadSVG",
"separator",
"downloadCSV",
"downloadXLS",
//"viewData",
"openInCloud"]
}
}
},
chart: {
type: 'column'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
credits: {
enabled: false
},
accessibility: {
announceNewData: {
enabled: true
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table><br>',
pointFormat: '<tr><td style="color: {series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
footerFormat: '</table>'
},
title: {
text: `${this.selectedYear} Total ${this.selectedItemTitle} Per ${this.selectedCategoryTitle} Per ${this.yearsSelected.length > 1 ? 'Year' : 'Month'} In ${this.selectedTypeTitle}`
},
subtitle: {
text: 'To highlight a specific unit, hover over its name below. To remove a unit from the chart, click on its name below.'
}
});
}

感谢您的帮助！

当尝试使用解析的函数时，我得到以下Highcharts错误：

data: {
table: 'datatable',
endColumn: this.currentReport.columns.length,
endRow: this.currentReport.rows.length - 1,
parsed: function (columns) {
columns[1] = columns[1].map(el => +el.replace('%', ''));
columns[2] = columns[2].map(el => +el.replace('$', ''));
}
},
No overload matches this call.
Overload 1 of 2, '(options: Options, callback?: ChartCallbackFunction): Chart', gave the following error.
Type '"container"' has no properties in common with type 'Options'.
Overload 2 of 2, '(renderTo: string | HTMLElement, options: Options, callback?: ChartCallbackFunction): Chart', gave the following error.
Type '(columns: any[][]) => void' is not assignable to type 'DataParsedCallbackFunction'.
Type 'void' is not assignable to type 'boolean'.ts(2769)
highcharts.d.ts(8955, 5): The expected type comes from property 'parsed' which is declared here on type 'DataOptions'

Answer 1

您可以使用parsed回调函数访问表中的数据并将其转换为数字。

例如：

data: {
table: 'datatable',
parsed: function(columns) {
columns[1] = columns[1].map(el => +el.replace('%', ''));
columns[2] = columns[2].map(el => +el.replace('$', ''));
}
}

---

现场演示：https://jsfiddle.net/BlackLabel/z54avmwh/

API参考：https://api.highcharts.com/highcharts/data.parsed