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
    }]
  });
}

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

＆＃39; textRenderer＆＃39;以上代码的一部分在“＆＃39;值”中添加逗号，我不确定如何对“＆＃39; max＆＃39;”进行相同操作。

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

感谢任何帮助。

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

我已将这些更改也包含在使用版本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插入逗号

2 个答案: