2013-02-15 37 views
7

Highcharts text labels for y-axisのy軸ラベルの設定方法を参照してください。ハイチャートタイプスクリプト、y軸ラベル

TypeScript定義でhttps://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.tsを使用しましたが、y軸フォーマッタを定義する方法が見つかりませんでした。

これまでに試したことがありますか?

- 更新 -

マイorigianl JavaScriptコードは、私は、各バー(私は棒グラフを使用)値であるthis.valueを有するコードで

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

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

あります。 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' 
*/ 

され、それがコンパイルされません。

+0

可能重複http://stackoverflow.com/questions/4987457/highcharts-text-labels-for-y-:

完全に動作する例コードに基づいて軸) –

+1

私はこれが重複しているとは思わない。ポスターはその回答のようなコードを使用しようとしていますが、TypeScriptコンパイラはこれを拒否しています。 – Fenton

+0

@hardywang最新の定義で問題を解決しましたか? – Fenton

答えて

2

アップデート - には最新のバージョンがダウンロードできるようになりました。あなたの問題を解決できることを願っています。

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

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

しかし、私はこれがない、これらのオブジェクトの多くの配列として、the documentation, which suggests you pass the yAxis options as an objectと一致するかわかりません。これは、yAxisが1つしかないという観点からも意味があります。私は有効なバージョン(すなわちするアレイではない)であると考えているものを達成するために

:あなたはあなたのhighchart.d.tsがここにファイルを調整することができます

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

...

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

私が提出しましたこれを修正するためにプッシュ要求を完全型に渡します。

[Y軸のHighchartsテキストラベル(の
+0

'yearChartOptions.yAxis.plotLines.label.style.formatter(()=>" $ "+ Highcharts.numberFormat(this.value/1000,0)+" k ");'フォーマッタはコンパイルエラーではありませんでした。 'this'キーワードは認識されません。サンプルhttp://stackoverflow.com/questions/4987457/highcharts-text-labels-for-y-axisとドキュメントhttp://api.highcharts.com/highcharts#yAxis.labels.formatter – hardywang

+0

私は以下の例を更新しました「私が信じるものを達成するためには、有効なバージョンです」というコメントがあります。 – Fenton

+0

ありがとう、私はオブジェクト内のオブジェクトをインスタンス化する構文を試して、それは動作します。私は自分の方法で何が間違っているのか分からず、オブジェクトをインスタンス化してオブジェクトのプロパティを設定しますが、機能しません。 – hardywang

関連する問題