ZingChart einzelne Serie Balkendiagramm Gruppe Etiketten

Also habe ich eine zusätzliche Schicht von Etiketten auf einem Balkendiagramm hinzufügen gebaut mit ZingChart gefragt worden. Wir haben im Wesentlichen ein einzelnes Reihenspalte-Diagramm, in dem Bewertungen für Kriterien innerhalb von Unterkategorien für eine bestimmte Kategorie grafisch dargestellt werden.ZingChart einzelne Serie Balkendiagramm Gruppe Etiketten

Derzeit Unterkategorien überhaupt nicht spielen eine Rolle in der Tabelle, wie ich die Bewertung für die einzelnen Kriterien innerhalb einer Kategorie zeichnen. Wie gruppiere ich die Kriterien zusammen, damit die Bezeichnungen die einzelnen Kriteriennamen anzeigen, wobei die Unterkategorie die Beschriftungen zusammenfasst.

Auch ich kann nicht multi-series Daten verwenden, mit einer Legende, da jede Spalte nach seiner Bewertung/Wert gefärbt ist, so eine farbcodierte Legende wäre sinnlos, wie ich es verstehe.

Quelle

2016-07-12 thorne51

vollständige Offenlegung, ich bin ein Mitglied der ZingChart Team.

Ich bin ein bisschen unsicher, genau das, was Sie wollen, aber ich habe einen Stich an der Erstellung Ihrer Grafik here gemacht.

Dieses Diagramm verwendet benutzerdefinierte tokens, Präfix data-. Sowie unser valueBox Textattribut. Wir fügen zwei benutzerdefinierte Tokens in unsere Serie Objekt

{ 
     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] 
    }

hier aus wir alle diese Werte auf schweben mit tooltips zugreifen können oder wenn wir immer diesen Wert angezeigt werden soll, wie ein Etikett, können wir valueBox verwenden.

plot:{ 
    valueBox:{ 
    placement:'top', // Put the valueBox above the bar 
    text:'%t: %v <br> %data-sub-text: %data-sub-rating', 
    backgroundColor:'#000' 
    } 
}

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>

Bitte lassen Sie mich wissen, wenn ich nicht angemessen Ihre Frage beantworten haben. btw

Quelle

2016-07-12 17:04:04 nardecky

Dank @nardecky, große Bibliothek. Nicht ganz, was ich vorhatte. Hier ist ein Bild zog ich schnell zu illustrieren, was von mir angefordert wurde zu bauen: https://drive.google.com/file/d/0B_dtw2ENIC_ldnBxblVBb2hYTkk/view?usp=drivesdk – thorne51

Ich habe eine neue [Demo] erstellt (http://demos.zechchart.com/view/YGBEFC2J) mit ähnlichen Techniken von oben. Ich würde vorschlagen, die Kriterien mit valueBox und/oder Tooltips und die Unterkategorie auf der x-Achsenbeschriftung zu implementieren. Dies ist die flüssigste IMO zu lesen. Die Beschränkungen des Bildes würden die Linien zeichnen, um die Stäbe zu gruppieren. Sie können dies tun, aber die Grafik reagiert nicht, so dass ich diesen Ansatz vermieden habe. Wenn das ein Client sein muss, kann ich dafür auch eine Demo erstellen. – nardecky

ZingChart einzelne Serie Balkendiagramm Gruppe Etiketten

Antwort

Verwandte Themen