7

我试图让我的仪表按扇区显示颜色（即在 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>

东风

4

4 回答 4

12

我看到您levelColorsGradient: false在设置第一个量具（g1）时正在使用。那应该根据文档来做。

文件说

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

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

// levelColors : 字符串[]

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

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

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

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

levelColors : myColors

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

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

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

于 2013-03-26T17:37:12.803 回答
6

您可以使用 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
});
于 2014-05-06T12:07:28.197 回答
0

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

于 2015-04-16T01:39:14.973 回答
0

您可以将 customSectos 与 percents: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

于 2017-06-15T16:26:34.620 回答