Highcharts TypeScript, y-axis label

问题

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.

回答1:

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:

来源：https://stackoverflow.com/questions/14887513/highcharts-typescript-y-axis-label

标签

Highcharts

typescript