1

我正在努力在我的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”。当我尝试手动添加它时，图表不会加载。

任何帮助表示赞赏。

4

2 回答 2

1

这是作为请求 193发布的功能请求，并已在2016 年 2 月 3 日maxTxt的更新中作为额外属性实施，并且是版本 1.2.7 的一部分。当前版本是 1.2.9。

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

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

我在使用 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>
于 2017-11-02T18:13:02.213 回答
1

另一种方法是formatNumber: true在初始化时添加。它将格式化最小最大值和值。你也可以摆脱这个textRenderer领域。

我更新了你的小提琴

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
          }]
        });
}
于 2017-11-02T18:53:41.203 回答