JustGage.js 插入逗号答案

【问题标题】：JustGauge.js Insert CommaJustGage.js 插入逗号
【发布时间】：2017-11-02 17:09:49
【问题描述】：

我很难在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
    }]
  });
}

小提琴https://jsfiddle.net/johnny_s/xsgpp4ng/1/

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

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

感谢任何帮助。

【问题讨论】：

标签： javascript justgage

【解决方案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 属性来解决该问题。

我在使用 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>

【讨论】：

【解决方案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
          }]
        });
}

【讨论】：