Javascript 如何使用JustGage按扇区显示颜色

我试图让我的仪表按扇区显示颜色（即，在变量g1上，我想要绿色0-10、橙色11-22和红色23-34）

有一个选择，但没有明确的指示，像我这样的noobs

任何帮助都将不胜感激

var g1=新的JustGage({
id:“得分”，
值：，
分:0,，
最高：34，
标题：“你的愤怒分数”，
LevelColorsGradent:false
}); 
var g2=新的JustGage({
id:“被动攻击”，
值：，
分:0,，
最高：14，
标题：“被动攻击”
}); 
var g3=新调整器({
id:“侵略性”，
值：，
分:0,，
最高：6，
标题：“侵略性”
}); 
var g4=新的JustGage({
id:“自信”，
值：，
分:0,，
最高：4，
标题：“自信”
});

---

dfg

我看到您在设置第一个仪表（g1）时使用的是

levelColorsGraient:false

。这应该根据文件来做

文件上说

选择显示值的基于扇区的颜色表示。信息技术 表示对于低于33%的所有值，颜色将保持绿色，从34%变为黄色 直到66%。超过67%时，仪表会发出红色的光。这些 三种是默认颜色

如果你想定义自己的颜色，文档会说

//levelColors:string[]

//指示器颜色，从下到上，RGB格式

因此，创建您自己的颜色变量，更改下面所需颜色的RGB值

var myColors = [
  "#a9d70b",
  "#f9c802",
  "#ff0000"
]

然后在设置仪表时设置此选项

levelColors : myColors

或者，如果您想将其全部保存在一起，请跳过该变量并执行此操作。我将中间值更改为橙色

 levelColors : [  "#a9d70b", "#F27C07",  "#ff0000" ]

---

仪表现在是否显示默认颜色？我认为您不能更改扇区，它们基于百分比。

您可以使用customSectors属性设置颜色

var g1 = new JustGage({
  id: "score", 
  value: <?php
    print $content['field_anger_score'][0]['#markup'];
   ?>, 
  min: 0,
  max: 34,
  title: "Your Anger Score",
  customSectors : [{"lo":0,"hi":10,"color":"#a9d70b"},
                   {"lo":11,"hi":22,"color":"#f9c802"},
                   {"lo":23,"hi":34,"color":"#ff0000"}],
  levelColorsGradient: false
}); 

var g1=新的JustGage({
id:“得分”，
值：，
分:0,，
最高：34，
标题：“你的愤怒分数”，
自定义扇区：[{“lo”：0，“hi”：10，“颜色”：“#a9d70b”}，
{“lo”：11，“hi”：22，“color”：“#f9c802”}，
{“lo”：23，“hi”：34，“颜色”：“ff0000”}，
LevelColorsGradent:false
}); 

如果设置3种颜色，则每种颜色将代表33%。如果您设置了5种颜色，则每种颜色将为20%。对于100%比例的maxim控件，您可以设置一个100元素数组，每个元素代表1%。颜色可以重复，因此前20%可能全部为“#ff0000”，前20%为红色。等等。我在说明中对此不清楚。

您可以使用带有百分比的customSectos:true

######September 26, 2016. - release 1.2.9

######customSectors receives structural update + additional "percents" feature (define ranges in %).   
    customSectors: {
          percents: true,
          ranges: [{
            color : "#43bf58",
            lo : 0,
            hi : 50
          },{
            color : "#ff3b30",
            lo : 51,
            hi : 100
          }]
        }

---

参考资料：

是的，谢谢你，我也明白了，只是我不知道如何改变扇区，所以它们不是设定在0-33、34-66、67-100，而是设定在我要求的间隔（0-10、11-22、23-34），不知何故，我认为这不可能基于每个仪表？不，我看不到改变扇区的选项，它们是设定在这些百分比上的。但它将与您拥有的数字接近，但如果您添加更多颜色，扇区的数量将更改为匹配。没有选项，但作者现在根据我的请求添加了此功能。

######September 26, 2016. - release 1.2.9

######customSectors receives structural update + additional "percents" feature (define ranges in %).   
    customSectors: {
          percents: true,
          ranges: [{
            color : "#43bf58",
            lo : 0,
            hi : 50
          },{
            color : "#ff3b30",
            lo : 51,
            hi : 100
          }]
        }