JQPlot - 基于区域的格式标记

MTA*_*G11 5 jquery number-formatting 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'
              }
            },
          }
      });
Run Code Online (Sandbox Code Playgroud)

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

nic*_*k_w 12

基于此,您可以使用如下格式字符串:

yaxis: {
    tickOptions: { formatString: "%'.2f" },
    min : 0
}
Run Code Online (Sandbox Code Playgroud)

该格式字符串以及值最终作为调用的参数$.jqplot.sprintf.然后,您可以按如下方式设置分隔符:

$.jqplot.sprintf.thousandsSeparator = ',';
$.jqplot.sprintf.decimalMark = '.';
Run Code Online (Sandbox Code Playgroud)

所以这段代码:

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));
Run Code Online (Sandbox Code Playgroud)

会产生这个:

European 10,000.00 
Other 10 000,00 
US 10,000.00 
Run Code Online (Sandbox Code Playgroud)

但是,看看欧洲人和美国一样吗?当这些分隔符设置被更改时,它会导致字符串替换,因此欧洲人最终会像它一样结束:用逗号替换逗号然后用逗号替换句点会返回原始字符串.

因此,您需要提供自定义刻度格式化方法,以便您可以即时应用这些设置,然后执行字符串替换:

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;
}
Run Code Online (Sandbox Code Playgroud)

这意味着您还需要一些方便的机制来建立用户的语言环境和要使用的正确分隔符.我保存和恢复thousandsSeparator以及decimalMark字符以这种方式只是为了确保这种方式设置它们不会在其他地方造成疏忽造成的问题.

另请注意,我的解决方案假定#和_字符不会出现在您想要格式化的值中.如果不是这样,请将FormatTick方法中的分隔符修改为更合适的分隔符.