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。这应该根据文档来做。

文件说

选择显示值的基于扇区的颜色表示。它意味着颜色将保持绿色，所有值低于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％比例下进行最大化控制，您可以设置100个元素数组，每个数组代表1％。颜色可以重复，所以前20个都可以＃34;＃ff0000＆＃34;因为前20％是红色的。我在说明书中对此并不清楚。

Answer 4

您可以将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
          }]
        }

参考：https://github.com/toorshia/justgage

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

4 个答案: