7

y 軸のラベルを設定する方法については、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'
*/

そして、それはコンパイルされません。

4

1 に答える 1

2

更新-確実に型指定されたハイチャートの定義に修正が加えられたので、最新バージョンをダウンロードして、問題が解決することを願っています。

Highcharts の型定義は、オプションの amd 配列を yAxis に渡す必要があることを示唆しています。これは TypeScript でコンパイルされます。

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 {
                    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 にプル リクエストを送信しました。

あなたのコードに基づいた完全に機能する例:

于 2013-02-15T09:58:32.750 に答える