2017-02-03 8 views
2

これはディンプルシリーズの私の誤解かもしれませんが、私はD3ディンプルツールチップをどのように変更するのか分かりません。 チャートデータを使用してD3ディンプルツールチップを変更するには?

は、私はこのようなデータを持っていると言う:

var data = [{"date":"01-02-2010","cost":"3796"},{"date":"01-03-2010","cost":"2699"},{"date":"01-04-2010","cost":"4588"}]; 

とバブルへの移行は、ツールチップ

date:01-02-2010 
cost:3796 
cost:3.8k 

が表示されますが、私は

date:01-02-2010 
cost:3796 

などのツールチップを表示したいとき私は問題がだと思う。

y.tickFormat = ',.0f';  
    myChart.addColorAxis(ycord, ["green", "yellow", "red"]); 

が、私はここでツールチップ

を変更する方法がわからないがjsfiddleは次のとおりです。http://jsfiddle.net/andrewarnier/Ra2xS/332/

任意の提案ですか?どうもありがとう!

答えて

1

私はあなたの欲望の出力にあなたのフィドルを更新しました。しかし、私はディンプルv2.2.0のバージョンを使用したことを指摘したいだけです。

Working jsfiddle

s.getTooltipText = function (e) { 
      return [ 
       "date : " + e.cx + "", 
       "value : " + e.cy + "" 
      ]; 
     }; 

あなたは周りの微調整とツールチップとして示さ何かを作ることができます見ることができるように。私はこれを願っています

1

あなたが好きなカスタムツールチップを作成できるという点でMahmutの答えは正しいですが、ツールチップから余分なコストを別の方法で削除することもできます。

ディンプルのデフォルトのツールチップロジックは非常に簡単です。それは、シリーズと接続された各軸から値を取得し、すべてをツールチップに含めます。わずかな改善として、ツールチップ内の行のいずれかが同一であるかどうかをチェックし、重複を削除します。ここでは、同じメトリックがカラー軸とy軸によって提供されているが、文字列が異なるようにyにティック形式を適用した場合に異常な場合があります。

溶液の色軸に同じティック・フォーマットを適用することです:

var c = myChart.addColorAxis(ycord, ["green", "yellow", "red"]); 
c.tickFormat = ',.0f'; 

それは少し奇妙だが、それは両方の軸が一致する文字列を報告し、重複が削除されることを意味します。

関連する問題