Question

请参阅讨论Highcharts text labels for y-axis设置y轴标签的方法。

我在TypeScript定义中使用了https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts，但是我找不到定义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'
*/

它不会编译。

Answer 1

更新 - 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，而不是许多这些对象的数组。从您拥有单个yAxis的角度来看，这也是有道理的。

实现我认为的有效版本（即不是数组）：

/// <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提交了拉取请求以解决此问题。

基于代码的完整工作示例：

Highcharts TypeScript，y轴标签

1 个答案: