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

Question

我正在尝试让我的仪表按扇区显示颜色(例如，在var g1上，我希望绿色0-10，橙色11-22和红色23-34)。

有这样做的选择，但对于像我这样的新手来说，没有明确的说明。

任何帮助都将不胜感激。

http://www.justgage.com

<script>
  var g1 = new JustGage({
    id: "score", 
    value: <?php
print $content['field_anger_score'][0]['#markup'];
?>, 
    min: 0,
    max: 34,
    title: "Your Anger Score",
levelColorsGradient: false
  }); 
 var g2 = new JustGage({
    id: "passive-aggressive", 
    value: <?php
print $content['field_passive_aggressive_score'][0]['#markup'];
?>, 
    min: 0,
    max: 14,
    title: "Passive Aggressive"
  }); 
var g3 = new JustGage({
    id: "aggressive", 
    value: <?php
print $content['field_aggressive_score'][0]['#markup'];
?>, 
    min: 0,
    max: 6,
    title: "Aggressive"
  }); 
var g4 = new JustGage({
    id: "assertive", 
    value: <?php
print $content['field_assertive_score'][0]['#markup'];
?>, 
    min: 0,
    max: 4,
    title: "Assertive"
  });

</script>

dfg

Answer 1

我看到您在设置第一个gage(g1)时正在使用levelColorsGradient: false。这应该是根据文档完成的。

纪录片上说

选择显示值的基于扇区的颜色表示。这意味着对于所有低于33%的值，颜色将保持绿色，从34%到66%，颜色将保持为黄色。超过67%，你的仪表就会发出红色的光。这三种颜色是默认颜色。

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

// levelColors : string[]

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

因此，创建您自己的颜色变量，为您想要的颜色更改下面的RGB值。

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

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

levelColors : myColors

或者，如果您想保持所有这些都在一起，请跳过该变量并执行以下操作。我将中间值更改为橙色。

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

仪表盘现在是否显示默认颜色？我认为你不能改变行业，它们是基于百分比的。

Answer 2

可以使用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
}); 

Answer 3

如果你设置3种颜色，那么每种颜色将代表33%。如果你设置了5种颜色，那么每种颜色都是20%。对于100%比例的maxim控制，你可以设置一个100元素数组，每个元素数组代表1%。颜色可以重复，所以前20个颜色都可以是"#ff0000“，前20%是红色。等等。这在说明中对我来说不是很清楚。