Highcharts TypeScript, y-akseetikett

Vennligst se diskusjonen Highcharts tekstetiketter for y-aksen for måten å sette opp y-akseetiketten på.

Jeg brukte https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts i min TypeScript-definisjon, men jeg kunne ikke finne en måte å definere y-akse formatter på.

Har noen prøvd før?

-- Oppdatering --

Min opprinnelige JavaScript-kode er

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

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

I koden har jeg this.value som er verdien til hver stolpe (jeg brukte stolpediagram). I TypeScript (jeg har ikke endret for å fjerne array ennå).

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

Utdataen er

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

Og det vil ikke kompilere.

Svar #1

Oppdatering - Definitely Typed Highcharts-definisjonen har nå min rettelse, så du kan laste ned den nyeste versjonen og forhåpentligvis vil det løse problemet ditt.

Typedefinisjonen for Highcharts antyder at du trenger å sende et array av alternativer til yAxis. Dette kompilerer i TypeScript.

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

Imidlertid er jeg ikke sikker på at dette samsvarer med dokumentasjonen, som antyder at du sender yAxis-alternativene som et objekt, ikke som en matrise av mange av disse objektene. Dette gir også mening ut fra synspunktet at du har en enkelt yAxis.

For å oppnå det jeg tror er den gyldige versjonen (dvs. ikke 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);

Du kan justere highchart.d.ts-filen din her...

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

Jeg har sendt inn en pull request til Definitely Typed for å fikse dette.

Fullt fungerende eksempel basert på koden din:

Relaterte artikler