请引用讨论Highcharts text labels for y-axis设置y轴标签的方法。
我用了https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts在我的 TypeScript 定义中,但我找不到定义 y 轴格式化程序的方法。
有人试过吗?
-- 更新 --
我的原始 JavaScript 代码是
var yearChartOptions = {
yAxis: {
plotLines: [{
label: {
formatter: function () {
return '$' + Highcharts.numberFormat(this.value/1000, 0) +'k ';
}
},
}]
},
};
// Create the chart
var yearChart = new Highcharts.Chart(yearChartOptions);
在代码中,我有一个 this.value,它是每个条形图(我使用条形图)的值。在 TypeScript 中(我还没有更改为删除数组)。
var yearChartOptions: HighchartsOptions = {};
yearChartOptions.chart = {};
yearChartOptions.yAxis = [];
yearChartOptions.yAxis[0] = {};
yearChartOptions.yAxis[0].plotLines = {};
yearChartOptions.yAxis[0].plotLines.label = {};
yearChartOptions.yAxis[0].plotLines.label.style.formatter(() => "$" + Highcharts.numberFormat(this.value / 1000, 0) + "k ");
// Create the chart
var yearChart = new Highcharts.Chart(yearChartOptions);
输出是
/*
Compile Error.
See error list for details
D:/MyProject/Scripts/test.ts(36,56): The property 'formatter' does not exist on value of type 'HighchartsCSSObject'
D:/MyProject/Scripts/test.ts(36,107): The property 'value' does not exist on value of type 'Dashboard'
*/
它不会编译。
最佳答案
更新 - Definitely Typed Highcharts definition现在有了我的修复程序,因此您可以下载最新版本,希望它能解决您的问题。
Highcharts 的类型定义表明您需要将 amd 选项数组传递给 yAxis。这在 TypeScript 中编译。
var chart = new Highcharts.Chart({
yAxis: [{
labels: {
formatter: function (): string {
return 'My Label';
}
}
}]
});
但是,我不确定这是否匹配 the documentation, which suggests you pass the yAxis options as an object ,而不是许多这些对象的数组。从您只有一个 y 轴的角度来看,这也是有道理的。
要实现我认为的有效版本(即不是数组):
/// <reference path="highchart.d.ts" />
var yearChartOptions: HighchartsOptions = {
yAxis: {
plotLines: {
label: {
formatter: function (): string {
return '$' + Highcharts.numberFormat(this.value / 1000, 0) + 'k ';
}
},
}
}
};
// Create the chart
var yearChart = new Highcharts.Chart(yearChartOptions);
您可以在此处调整您的 highchart.d.ts 文件...
interface HighchartsOptions {
chart?: HighchartsChartOptions;
// others...
yAxis?: HighchartsAxisOptions; // <-- remove the [] from this line
}
我已经向 Definitely Typed 提交了一个 pull request 来解决这个问题。
基于您的代码的完整示例:
关于Highcharts TypeScript,y 轴标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14887513/