Highcharts打字稿,y轴标签(Highcharts TypeScript, y-axis l

2019-08-17 00:17发布

请参考讨论Highcharts文本标签y轴的方式设置y轴标签。

我用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其是每个杆(I使用条形图)值。 在打字稿(我没有改变删除阵列还)。

    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:

更新 - 绝对类型化Highcharts定义现在有我的修复,所以你可以下载最新版本,并希望这将解决您的问题。

为Highcharts类型定义提示你需要传递的选项,以y轴AMD阵列。 这将编译的打字稿。

var chart = new Highcharts.Chart({
    yAxis: [{
        labels: {
            formatter: function (): string {
                return 'My Label';
            }
        }
    }]
});

但是,我不知道这个匹配的文件,这表明你通过Y轴选项的对象 ,而不是许多对象的数组。 这也使得从你有一个单一的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
}

我已经提交了拉要求绝对键入的解决这个问题。

根据你的代码工作的完整示例:



文章来源: Highcharts TypeScript, y-axis label