JustGauge.js 插入逗号

Question

我很难在我的 JustGauge 图表中插入逗号。

到目前为止，我有以下代码。大部分都按预期工作；

window.onload = function() {

  var g1 = new JustGage({
    id: "g1",
    value: 24692,
    min: 0,
    max: 30009,
    title: 'Document Countdown',
    titlePosition: 'above',
    width: 800,
    height: 800,
    pointer: true,
    textRenderer: function(val) {
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    gaugeWidthScale: 1.2,
    noGradient: true,
    customSectors: [{
      color: '#32CD32',
      lo: 0,
      hi: 30009
    }]
  });
}

Fiddle https://jsfiddle.net/johnny_s/xsgpp4ng/1/

上面代码的'textRenderer'部分在'value'中添加了一个逗号，我不知道如何对'max'做同样的事情。

我需要在 'max' 值中添加一个逗号 - 所以它是“30,009”。当我尝试手动添加时，图表不会加载。

感谢任何帮助。

Answer 1

这是作为 request 193 and has been implemented as an extra property maxTxt in the update of February 3, 2016 发布的功能请求，是版本 1.2.7 的一部分。当前版本是 1.2.9.

请注意，与您使用的版本 (1.2.2) 相比，1.2.9 版中的多项功能发生了变化：

customSectors的结构：不再是数组。数组部分现在移动到 sub属性ranges
已删除对 title 的支持，因为这确实不属于小部件的 "core business"；可以更好的控制这样一个标题在周围HTML/CSS.
存在与 noGradient 设置相关的错误：issue 270。建议的修复程序未包含在最新版本中。我建议不要自己篡改库，而是通过添加具有正值的 customSectors.length 属性来解决该问题。

我在使用 1.2.9 版的 updated fiddle 中也包含了这些更改：

var g1 = new JustGage({
      id: "g1", 
      value: 24692,
      min: 0,
      max: 30009,
      maxTxt: "30,009", // <------ add this
      // remove title attributes -- no longer supported
      //title: 'Document Countdown',
      //titlePosition: 'above',
      width: 800,
      height: 400, // <--- reduced to allow title to be closer to gauge
      pointer: true,
      textRenderer: function(val) {
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
      gaugeWidthScale: 1.2,
      pointerOptions: {
        toplength: -15,
        bottomlength: 10,
        bottomwidth: 12,
        color: '#8e8e93',
        stroke: '#ffffff',
        stroke_width: 3,
        stroke_linecap: 'round'
      },
      noGradient: true,
      customSectors: { // <--- no longer an array...
        ranges: [{ // <--- ... which has moved to this property
          color: '#32CD32',
          lo : 0,
          hi : 30009
        }],
        length: 1 // fixes a bug
      }
});

HTML 应该包含标题。像这样：

<div style="display: inline-block">
  <h2 style="text-align:center;">Document Countdown</h2>
  <div id="g1"></div>
</div>

Answer 2

另一种方法是在初始化时添加formatNumber: true。它将格式化最小最大值和值。您也可以删除 textRenderer 字段。

我更新了你的fiddle

window.onload = function(){
         var g1 = new JustGage({
          id: "g1", 
          value: 24692, /* <-- just change this to your current value */
          min: 0,
          max: 30009, /* start amount */
          title: 'Document Countdown',
          titlePosition: 'above',
          width: 800,
          height: 800,
          pointer: true,
          formatNumber: true,
          gaugeWidthScale: 1.2,
            pointerOptions: {
            toplength: -15,
            bottomlength: 10,
            bottomwidth: 12,
            color: '#8e8e93',
            stroke: '#ffffff',
            stroke_width: 3,
            stroke_linecap: 'round'
          },
          noGradient: true,
          customSectors: [{
            color: '#32CD32',
            lo: 0,
            hi: 30009
          }]
        });
}

JustGauge.js 插入逗号

JustGauge.js Insert Comma

javascript

justgage