2013-01-31 6 views
5

jqplotのティックをどのようにフォーマットして、との間の変更を処理することができますか? ""地域に応じて ""と表示されます。JQPlot - 区域に基づいてティックをフォーマットします

たとえば、

  • ヨーロッパ - 1.000,00
  • 米国 - 1,000.00
  • その他1 000,00

私の例jqplotの初期化は、私が見て....

plot3 = $.jqplot('saturationChart', lineArray, 
     { 
      title:m_Language.saturationChartName, 
      series:lineColor, 
      legend:{show:true, location:'se'}, 
      // You can specify options for all axes on the plot at once with 
      // the axesDefaults object. Here, we're using a canvas renderer 
      // to draw the axis label which allows rotated text. 
      axes:{ 
      xaxis:{ 
//   label:'Minutes', 
       renderer: $.jqplot.LogAxisRenderer, 
       tickDistribution:'power', 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
       //fontSize: '12pt' 
       }, 
      }, 
      yaxis:{ 
//   label:'Megaohms', 
       renderer: $.jqplot.LogAxisRenderer, 
       tickDistribution:'power', 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
       //fontSize: '12pt' 
       } 
      }, 
      } 
     }); 

のように見えますドキュメントを介して私が探している必要があるキーワードを確認していない...任意の助けをいただければ幸いです

答えて

12

thisに基づき、次のような形式の文字列を使用することができます。

yaxis: { 
    tickOptions: { formatString: "%'.2f" }, 
    min : 0 
} 

値と一緒にフォーマット文字列は、$.jqplot.sprintfへの呼び出しに引数として終わること。次のようにあなたはその後、セパレータを設定することができます。

$.jqplot.sprintf.thousandsSeparator = ','; 
$.jqplot.sprintf.decimalMark = '.'; 

ので、このコード:ヨーロッパ1と同じであるかを確認、しかし

European 10,000.00 
Other 10 000,00 
US 10,000.00 

var value = 10000; 
$.jqplot.sprintf.thousandsSeparator = '.'; 
$.jqplot.sprintf.decimalMark = ','; 
console.log($.jqplot.sprintf("European %'.2f", value)); 

$.jqplot.sprintf.thousandsSeparator = ' '; 
$.jqplot.sprintf.decimalMark = ','; 
console.log($.jqplot.sprintf("Other %'.2f", value)); 

$.jqplot.sprintf.thousandsSeparator = ','; 
$.jqplot.sprintf.decimalMark = '.'; 
console.log($.jqplot.sprintf("US %'.2f", value)); 

がこれを演出します米国?これらの区切りの設定が変更されると、文字列の置換が行われます。そのため、ヨーロッパの文字列のようになります。カンマをピリオドで置き換え、ピリオドでピリオドをカンマで置き換えると元の文字列に戻ります。そのための

あなたはオンザフライそれらの設定を適用することができ、その後、文字列を置換んので、カスタムティックの書式設定方法を提供する必要があるでしょう:

yaxis: { 
    tickOptions: { 
     tickOptions: { formatString: "%'.2f" }, 
     formatter: function(format, value){ 
      return FormatTick(format, value); 
     } 
    } 
} 

.... 

function FormatTick(format, value) { 
    var prevThousandsSeparator = $.jqplot.sprintf.thousandsSeparator; 
    var prevDecimalMark = $.jqplot.sprintf.decimalMark; 

    $.jqplot.sprintf.thousandsSeparator = '#'; 
    $.jqplot.sprintf.decimalMark = '_'; 

    var formattedValue = $.jqplot.sprintf(format, value); 
    formattedValue = formattedValue.replace($.jqplot.sprintf.decimalMark, Language.DecimalMark) 
     .replace($.jqplot.sprintf.thousandsSeparator, Language.ThousandsSeparator); 

    $.jqplot.sprintf.thousandsSeparator = prevThousandsSeparator; 
    $.jqplot.sprintf.decimalMark = prevDecimalMark; 

    return formattedValue; 
} 

これは、あなたもいくつかを必要とすることを意味しますユーザーのロケールと使用する正しい区切り文字の両方を確立するための便利なメカニズム。私はこのようにしてthousandsSeparatordecimalMark文字を保存して復元するだけで、このように設定しても他の場所で不注意な問題が発生することはありません。

また、私の解決策では、#_の文字は、フォーマットしたい値に含まれないことを前提としています。そうでない場合は、FormatTickメソッドのセパレータをより適切なものに変更します。

+0

$ .jqplot.sprintf.thousandsSeparatorと $ .jqplot.sprintf.decimalMarkを設定するだけで、ドイツ語専用のページで解決できることがわかりました。どうもありがとう! – alfonx