charts - ZingChart - 更改 ValueBox 的属性

Question

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

我的目标是突出显示与我的目标切片/系列关联的单个值框。我已经研究并试验了“规则”。下面的示例是硬编码的 %v = 17.1(恰好是系列 2 的值)。本例中的值框下方有一个边框，非常棒。但是我不能使用值标记 (%v)，因为可能有多个系列具有相同的值。我已经尝试了许多可用的标记，但我似乎无法找到一个代表我确定的“目标”系列的标记。我认为根据情节文本 (%t) 突出显示可能很简单，但我试过了，但也没有用。

我试过使用“自定义 token ”功能，但目前不会深入研究，因为它也不起作用。

我如何“突出显示”系列 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 团队。希望这能解决您的问题。