2013-01-31 37 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 = '.'; 

所以这个代码:

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

会产生这样的:

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

不过,看到欧洲一个怎么是一样的我们?当这些分隔符设置被更改时,会导致字符串替换,因此欧洲人为什么会这样结束:用句点替换逗号,然后用逗号替换句点,可以让您恢复原始字符串。

正因为如此,您需要提供一个自定义的刻度格式化方法,所以你可以申请在即时的设置,然后做一个字符串替换:

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