Question

我正在尝试将自定义扇区添加到我的JustGage对象中，当我添加它们时，它只显示默认值：

0-25 =绿色，25-50 =黄色，50-100 =红色

我想让它像这样分开：

0-25 =红色，25-50 =橙色，50-75 =黄色，75-100 =绿色

我的代码如下。我按照我的要求定义了我的customSectors，但是gage仍然默认回原来的3个扇区。我在这里做错了什么。我试图在JustGage上找到一些文档，但确实没有。

var Gage1 = new JustGage({
id: "gage-1", 
value: 100, 
min: 0,
max: 100,
showInnerShadow: false,
shadowOpacity : 0.3,
customSectors: [{
    color : "#CE1B21",
    lo : 0,
    hi : 25
}, {
    color : "#D0532A",
    lo : 25,
    hi : 50
}, {
    color : "#FFC414",
    lo : 50,
    hi : 75
}, {
    color : "#85A137",
    lo : 75,
    hi : 100
}],
valueFontColor : ['#4A98BE'], 
gaugeColor : ['#333'], 
    title: "Demo Gage",
label: "%"
});

注意：我使用的是justgage.1.0.1.js

Answer 1

我认为你所需要的只是levelColors：

var Gage1 = new JustGage({
  id: "gage-1", 
  value: 100, 
  min: 0,
  max: 100,
  levelColors: ['#CE1B21', '#D0532A', '#FFC414', '#85A137']
});

我认为justGage不支持您为每种颜色选择最小值和最大值。您可能需要使用levelColorsGradient选项，首先尝试将其设置为false。

Answer 2

如果您获得了最新版本的justgage，您会看到'customSectors'在代码中，如果您从他们的网站下载，'customSectors'就不存在。

使用以下链接获取最新信息，您的代码应该可以正常使用。

https://raw.github.com/toorshia/justgage/master/justgage.js

Answer 3

对我有用的配置：

  config = {
    value: 0,
    min: 0,
    max: 600000,
    decimals: 0,
    gaugeWidthScale: 0.6,
    label: '$',
    formatNumber: true,
    customSectors: {
      percents: true,
      ranges: [
        {lo: 0, hi: 33, color: '#13ED5A'}, // lo and hi values are in %
        {lo: 34, hi: 67, color: '#49D61C'},
        {lo: 68, hi: 100, color: '#49AB1C'}
      ]
    }
  };

JustGage中的自定义颜色无法正常工作

3 个答案: