Question

我正在使用ZingChart创建一个简单的饼图。我使用ColdFusion标签和json文件来设置图表的样式。在下面的例子中，我的“目标”系列（我想要“突出显示”的那个）是2，我通过偏移并在其周围放置边框来操纵该切片（参见示例）。问题是如果饼图非常小，边框是不可区分的。

我的目标是突出显示与目标切片/系列相关联的单个值框。我研究并试验了“规则”。下面的例子是硬编码的％v = 17.1（恰好是系列2的值）。此示例中的valuebox在其下方有一个边框，这很棒。但是我不能使用值标记（％v），因为可能有多个具有相同值的系列。我已经尝试了许多可用的令牌，我似乎无法找到一个代表我所识别的“目标”系列的令牌。我认为基于情节文本（％t）突出显示可能是直截了当的，但我尝试了，但这也没有用。

我尝试使用“自定义令牌”功能，但目前不会进入，因为这也不起作用。

如何“突出显示”系列2的值框，可能是使用规则（希望使用可用的令牌）？

{
   "graphset":[
      {
         "type":"pie",
         "scale":{ "size-factor":"69%"},
         "plot":{
            "valueBox":{
               "rules":[
                  {
                     "rule":"%v==17.1",
                     "fontSize":18,
                     "fontColor":"black",
                     "font-family":"Arial",
                     "border-bottom":"2px solid black"
                  }
               ],
               "placement":"out",
               "text":"%t:%v",
               "fontSize":16,
               "fontColor":"black",
               "font-family":"Arial"
            }
         },
         "series":[
            {
               "values":[ 1 ]
            },
            {
               "values":[ 2 ],
               "offset-r":"5%",
               "border-color":"black",
               "border-width":"3"
            },
            {
               "values":[ 3 ]
            },
            {
               "values":[ 4 ]
            }
         ]
      }
   ]
}

由于

Answer 1

听起来你正在寻找％p或％plot-index标记（它们是相同的）。这将允许您根据系列的索引修改valueBox。

我在这里添加了一个演示： http://demos.zingchart.com/view/NRSRN7VT

{
    type: "pie",
    plot:{
      valueBox:{
        text: "%t: %v",
        placement: "out",
        rules:[
          {
            rule: "%p == 1",
            color: "black",
            fontStyle: "italic",
            borderColor: "red",
            borderWidth: 2,
            shadow: 0,
            padding: 10
          }
        ]
      }
    },
    series : [
        {
            values : [35]
        },
        {
            values : [20]
        },
        {
            values : [15]
        }
    ]
}

我在ZingChart团队。希望这能解决您的问题。

ZingChart - 改变ValueBox的属性

1 个答案: