2016-04-01 7 views
3

私はZingChartを使って簡単な円グラフを作成しています。私はColdFusionタグとjsonファイルを使用してチャートのスタイルを設定しています。下の例では、私の「ターゲット」シリーズ(強調表示したいもの)は2で、そのスライスをオフセットしてその周りに境界線を置くことでそのスライスを操作します(例を参照)。この問題は、円のスライスが非常に小さく、境界が区別できない場合に発生します。ZingChart - ValueBoxのプロパティを変更

私の目標は、ターゲットスライス/シリーズに関連付けられた単一の値ボックスを強調表示することです。私は研究し、 "ルール"を実験しました。以下の例は、%v = 17.1(シリーズ2の値になります)でハードコードされています。この例の値ボックスには、その下に境界線があります。しかし、同じ値を持つ複数の系列が存在する可能性があるため、値トークン(%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 ] 
      } 
     ] 
     } 
    ] 
} 

おかげ

答えて

2

あなたは%のPまたは%プロットインデックストークン(それらが同じである)を探しているようですね。これにより、系列のインデックスに基づいて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チームにしています。うまくいけば、これはあなたの問題を解決します。

+0

はい、ありがとうございます。投稿前にそのトークンを使って遊んでいましたが、最初のシリーズ配列要素が実際には0であるという事実によって投げ捨てられました。しかし、一旦それを理解すれば、その解決策はうまく機能します。再度、感謝します。 –

関連する問題