Highcharts TypeScript，y轴标签 [英] Highcharts TypeScript, y-axis label

问题描述

请参阅讨论 Highcharts y轴的文字标签的方式设置Y轴标签。

我使用 https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts 在我的TypeScript定义中，但我找不到方法定义y轴格式化程序。

以前有人试过吗？ 更新 -

我的origianl JavaScript代码是

  var yearChartOptions = {
 yAxis：{
 plotLines：[{
 label：{
 formatter：function（）{
 return'$'+ Highcharts.numberFormat（this.value / 1000，0）+'k'; 
} 
}，
}] 
}，
}; 
 
 //创建图表
 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）; 
 
 //创建图表
 var yearChart = new Highcharts.Chart（yearChartOptions）; 
  

输出是

  / * 
编译错误。 
详细信息见错误列表
 D：/MyProject/Scripts/test.ts（36,56）：'HighchartsCSSObject'类型的值'formatter'不存在
 D： /MyProject/Scripts/test.ts(36,107）：属性'值'不存在于'仪表板'类型的值上
 * / 
  

并且它不会被编译。 更新 strong> - 绝对键入的Highcharts定义现在有我的修复，所以你可以下载最新版本，希望它能解决你的问题。

Highcharts的类型定义表明你需要传递amd数组到yAxis。

  var chart = new Highcharts.Chart（{
 yAxis：[{
 labels：{
 formatter：function（）：string {
 return'My Label'; 
} 
} 
}] 
}）; 
  

然而，我不确定这个匹配文档，它建议您将yAxis选项作为对象传递给，而不是许多这些对象的数组。这也是有道理的，你有一个单一的yAxis。

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

  ///< reference path =highchart.d.ts/> 
 
 var yearChartOptions：HighchartsOptions = {
 yAxis：{
 plotLines：{
 label：{
 formatter：function（）：string {
返回'$'+ Highcharts.numberFormat（this.value / 1000，0）+'k'; 
} 
}，
} 
} 
}; 
 
 
 //创建图表
 var yearChart = new Highcharts.Chart（yearChartOptions）; 
  

您可以在这里调整您的highchart.d.ts文件...

 界面HighchartsOptions {
图表？：HighchartsChartOptions; 
 // others ... 
 yAxis？：HighchartsAxisOptions; //<  - 从此行删除[] 
} 
  

我已提交一个拉动请求，以绝对键入来解决这个问题。

完全基于你的代码的示例：

Please refer to discussion Highcharts text labels for y-axis the way to setup y-axis label.

I used https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts in my TypeScript definition, but I could not find a way to define y-axis formatter.

Anybody ever tried before?

-- Update --

My origianl JavaScript code is

var yearChartOptions = {
    yAxis: {
        plotLines: [{
            label: {
                formatter: function () {
                    return '$' + Highcharts.numberFormat(this.value/1000, 0) +'k ';
                }
            },
        }]
    },
};

// Create the chart
var yearChart = new Highcharts.Chart(yearChartOptions);

In the code I have a this.value which is each bar (I used bar chart) value. In TypeScript (I have not changed to remove array yet).

    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);

The output is

/*
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'
*/

And it won't compile.

解决方案

Update - The Definitely Typed Highcharts definition now has my fix, so you can download the latest version and hopefully it will solve your problem.

The type definition for Highcharts suggests you need to pass amd array of options to yAxis. This compiles in TypeScript.

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

However, I'm not sure this matches the documentation, which suggests you pass the yAxis options as an object, not as an array of many of these objects. This also makes sense from the point of view that you have a single yAxis.

To achieve what I believe is the valid version (i.e. not arrays):

/// <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);

You can adjust your highchart.d.ts file here...

interface HighchartsOptions {
    chart?: HighchartsChartOptions;
    // others...
    yAxis?: HighchartsAxisOptions; // <-- remove the [] from this line
}

I have submitted a pull request to Definitely Typed to fix this.

Fully working example based on your code:

这篇关于Highcharts TypeScript，y轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！