2016-07-12 4 views
5

ZingChartで作成した棒グラフにラベルのレイヤーを追加するように求められました。基本的には、特定のカテゴリについて、サブカテゴリ内の基準の評価をプロットする単一シリーズの縦棒グラフがあります。ZingChart単列棒グラフグループラベル

現在、カテゴリ内の各条件の評価をプロットするので、サブカテゴリはチャートではまったく役割を果たしません。どのようにして基準を「グループ化」して、ラベルに各基準名を表示させます。サブカテゴリはラベルをまとめてグループ化します。

また、各列が定格/値に従って色付けされているので、凡例を使用することができないため、色分けされた凡例はわかりましたが無意味です。

答えて

4

私はZingChartチームのメンバーです。

私はちょうどあなたが欲しいものを少しは確信していますが、私はあなたのチャートを作成する際に刺しましたhere

この図では、tokensというカスタムを使用しており、接頭辞はdata-です。テキスト属性のvalueBoxと同様です。ここでは、我々はtooltipsでホバー上のすべてのこれらの値にアクセスすることができますから、私たちのシリーズオブジェクト

{ 
     values: [25,42,67,89,15,34,67,85], 
     text:'Rating 1', // Standard plot/legend text 
     'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'], 
     'data-sub-rating':[1,2,3,4,5,6,7,8] 
    } 

に2つのカスタムトークンを追加したり、我々は常にその値を表示したい場合は、ラベルのように、我々はvalueBoxを使用することができます。

var myConfig = { 
 
    \t type: "column", 
 
    \t plot:{ 
 
    \t barWidth:15, 
 
    \t valueBox:{ 
 
    \t  placement:'top', 
 
    \t  text:'%t: %v <br> %data-sub-text: %data-sub-rating', 
 
    \t  backgroundColor:'#000' 
 
    \t } 
 
    \t }, 
 
\t series : [ 
 
\t \t { 
 
\t \t \t values : [25,42,67,89,15,34,67,85], 
 
\t \t \t text:'Rating 1', 
 
\t \t \t 'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'], 
 
\t \t \t 'data-sub-rating':[1,2,3,4,5,6,7,8] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
</script> 
 

 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

plot:{ 
    valueBox:{ 
    placement:'top', // Put the valueBox above the bar 
    text:'%t: %v <br> %data-sub-text: %data-sub-rating', 
    backgroundColor:'#000' 
    } 
} 
私は適切にあなたの質問に答えなかった場合は私に知らせてください。

+0

ありがとう@nardecky、素晴らしいライブラリbtw。私が心に留めていたものではありません。ここに私が作成したものが何であるかを簡単に説明した写真があります:https://drive.google.com/file/d/0B_dtw2ENIC_ldnBxblVBb2hYTkk/view?usp=drivesdk – thorne51

+0

私は新しい[デモ](http: /demos.zingchart.com/view/YGBEFC2J)を参照してください。私は、valueBoxおよび/またはツールチップとx軸ラベルのサブカテゴリで基準を実装することをお勧めします。これはIMOを読むのに最も流動的です。画像の制約は、バーをグループ化するための線を描くことです。あなたはこれを行うことができますが、グラフは反応しませんので、私はこのアプローチを避けました。クライアントが持っている必要がある場合は、そのデモも作成できます。 – nardecky

関連する問題