javascript - 如何使用 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

我看到您在设置第一个量具 (g1) 时使用了 levelColorsGradient: false。根据文档应该这样做。

文档说

choose sector-based color representation of the displayed value. It means color will stay green for all values below 33%, yellow from 34% up until 66%. Take it over 67% and your gauge will glow red. These three are the default colors.

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

// levelColors : string[]

// colors of indicator, from lower to upper, in RGB format

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

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

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

levelColors : myColors

或者，如果您想将它们放在一起，请跳过变量并执行此操作。我将中间值更改为橙色。

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

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