javascript - JustGage.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' 做同样的事情。

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

感谢任何帮助。

Answer 1

这是一个发布为 request 193 的功能请求并已在 February 3, 2016 的更新中作为额外属性 maxTxt 实现并且是版本 1.2.7 的一部分。当前版本为 1.2.9。

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

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

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

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>