JQPlot - 基于区域的格式标记

时间:2013-01-31 17:52:09

标签: jquery jqplot number-formatting

如何格式化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'
              }
            },
          }
      });

我查看了文档,但我不确定我需要查找哪些关键字...任何帮助都将不胜感激

1 个答案:

答案 0 :(得分: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方法中的分隔符修改为更合适的分隔符。