ZingChart bar Raum funktioniert nicht

Ich bin ein zingchart mit folgenden Daten zu machen:ZingChart bar Raum funktioniert nicht

{ 
"graphset":[ 
    { 
     "type":"bar", 
     "plotarea":{ 
      "adjust-layout":true, 
      "mask-tolerance":[0,0] 
     }, 
     "background-color":"#fff", 
     "plot":{ 
      "alpha":0.9, 
      "border-width":1, 
      "stacked":true, 
      "border-color":"black", 
      "cursor":"pointer", 
      "border-radius-top-left":4, 
      "border-radius-top-right":4, 
      "bar-width":"20px", 
      "line-width":2, 
      "bar-space":"50px", 
      "background-fit":"x", 
      "animation":{ 
       "effect":"ANIMATION_SLIDE_BOTTOM" 
      }, 
      "hover-state":{ 
       "alpha":1, 
       "visible":true 
      } 
     }, 
     "scale-x":{ 
      "zooming":true, 
      "label":{ 
       "text":"Location", 
       "font-color":"#000", 
       "font-size":"16px", 
       "text-align":"center", 
       "background-color":"#fff", 
       "width":"100%", 
       "position":"absolute", 
       "bottom":"0" 
      }, 
      "values":[" HYDERABAD"," GURGAON"," JAIPUR"], 
      "line-color":"#CCC", 
      "tick":{ 
       "line-color":"#a6a6a6", 
       "line-width":1, 
       "visible":0 
      }, 
      "guide":{ 
       "line-color":"#666", 
       "line-style":"solid" 
      }, 
      "item":{ 
       "font-family":"arial", 
       "font-color":"#000", 
       "width":"190px", 
       "text-align":"center", 
       "background-color":"rgb(255,255,255)", 
       "padding-top":"4px" 
      } 
     }, 
     "scale-y":{ 
      "zooming":true, 
      "label":{ 
       "text":"Attrition Rate", 
       "font-color":"#2B776C", 
       "font-size":"16px" 
      }, 
      "line-color":"#CCC", 
      "tick":{ 
       "visible":false 
      }, 
      "guide":{ 
       "line-style":"dashed", 
       "line-color":"#ccc" 
      }, 
      "item":{ 
       "font-family":"arial", 
       "font-color":"#8B8B8B" 
      }, 
      "zoom-to":[32.5,34.5] 
     }, 
     "series":[ 
      { 
       "values":[33.59,33.36,32.93], 
       "stack":1, 
       "background-color":"#ff3b3b", 
       "line-color":"#ff3b3b", 
       "marker":{ 
        "background-color":"#ff3b3b", 
        "size":3 
       }, 
       "value-box":{ 
        "font-color":"#ff3b3b", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#ff3b3b", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 30 Days for location %kl" 
       }, 
       "palette":0 
      }, 
      { 
       "values":[33.5,33.08,32.93], 
       "stack":2, 
       "background-color":"#ff9b67", 
       "line-color":"#ff9b67", 
       "marker":{ 
        "background-color":"#ff9b67", 
        "size":4 
       }, 
       "value-box":{ 
        "font-color":"#ff9b67", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#ff9b67", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 30 Days for location %kl" 
       }, 
       "palette":1 
      }, 
      { 
       "values":[32.91,33.55,34.15], 
       "stack":3, 
       "background-color":"#6cebb3", 
       "line-color":"#6cebb3", 
       "marker":{ 
        "background-color":"#6cebb3", 
        "size":5 
       }, 
       "value-box":{ 
        "font-color":"#6cebb3", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#6cebb3", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 30 Days for location %kl" 
       }, 
       "palette":2 
      }, 
      { 
       "values":[32.78,33.33,33.78], 
       "stack":4, 
       "background-color":"#ff3b3b", 
       "line-color":"#ff3b3b", 
       "marker":{ 
        "background-color":"#ff3b3b", 
        "size":3 
       }, 
       "value-box":{ 
        "font-color":"#ff3b3b", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#ff3b3b", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 60 Days for location %kl" 
       }, 
       "palette":3 
      }, 
      { 
       "values":[34.04,33.63,32.93], 
       "stack":5, 
       "background-color":"#ff9b67", 
       "line-color":"#ff9b67", 
       "marker":{ 
        "background-color":"#ff9b67", 
        "size":4 
       }, 
       "value-box":{ 
        "font-color":"#ff9b67", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#ff9b67", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 60 Days for location %kl" 
       }, 
       "palette":4 
      }, 
      { 
       "values":[33.19,33.04,33.29], 
       "stack":6, 
       "background-color":"#6cebb3", 
       "line-color":"#6cebb3", 
       "marker":{ 
        "background-color":"#6cebb3", 
        "size":5 
       }, 
       "value-box":{ 
        "font-color":"#6cebb3", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#6cebb3", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 60 Days for location %kl" 
       }, 
       "palette":5 
      }, 
      { 
       "values":[33.76,32.58,33.51], 
       "stack":7, 
       "background-color":"#ff3b3b", 
       "line-color":"#ff3b3b", 
       "marker":{ 
        "background-color":"#ff3b3b", 
        "size":3 
       }, 
       "value-box":{ 
        "font-color":"#ff3b3b", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#ff3b3b", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 90 Days for location %kl" 
       }, 
       "palette":6 
      }, 
      { 
       "values":[32.76,33.98,33.78], 
       "stack":8, 
       "background-color":"#ff9b67", 
       "line-color":"#ff9b67", 
       "marker":{ 
        "background-color":"#ff9b67", 
        "size":4 
       }, 
       "value-box":{ 
        "font-color":"#ff9b67", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#ff9b67", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 90 Days for location %kl" 
       }, 
       "palette":7 
      }, 
      { 
       "values":[33.49,33.43,32.71], 
       "stack":9, 
       "background-color":"#6cebb3", 
       "line-color":"#6cebb3", 
       "marker":{ 
        "background-color":"#6cebb3", 
        "size":5 
       }, 
       "value-box":{ 
        "font-color":"#6cebb3", 
        "visible":true 
       }, 
       "tooltip":{ 
        "background-color":"#6cebb3", 
        "border-color":"#fff", 
        "border-width":1, 
        "border-radius":3, 
        "wrap-text":true, 
        "alpha":0.8, 
        "text":"%node-value % chances in 90 Days for location %kl" 
       }, 
       "palette":8 
      } 
     ] 
    } 
] 
}

ich gegeben hatte, Bar-Raum 50px noch der es die Bar sind nahe beieinander wie

folgt

ich frage mich, wie die Margen in Bars geben?

Quelle

2016-04-25 Akhilesh Kumar

Suche durch Plugin Dokumentation, werden Sie einige 'CLASS' erhalten, die Sie überschreiben können. – Tushar

Ich suchte und probierte viel Kombination, aber keine Effekte. –

Ich bin zur Zeit ein Mitglied der ZingChart Team und haben Ihre Anfrage überprüft. Nach einigem leichten Graben und Testen sind Sie richtig, "Balkenabstand" passt die Ränder zwischen den Balken nicht an. Es scheint so zu sein, dass 'Balkenbreite' und 'Balkenraum' in unserer Bibliothek momentan nicht zusammen existieren können. Es gibt eine Menge Berechnungen, die dazu beitragen, die dynamische Größe der Balken beizubehalten, während es den Benutzern ermöglicht wird, beide Attribute gleichzeitig anzupassen, ist nicht einfach. Ich würde gerne fragen, welchen Look Sie mit diesen Einstellungen erreichen möchten? Ich habe einige Redundanzen in deinem JSON beseitigt, was es viel kleiner macht. Dieses Demo-Diagramm hat die 'bar-width' & 'bar-space' Attribute weggelassen. Mit dem Standardverhalten würde das Diagramm wie folgt aussehen: http://demos.zingchart.com/view/O3M6RCTF

Ich habe das angeschlossene JSON hier:

{ 
"graphset":[ 
    { 
     "type":"bar", 
     "plotarea":{ 
     "adjust-layout":true, 
     "mask-tolerance":[0,0] 
     }, 
     "background-color":"#fff", 
     "plot":{ 
      "alpha":0.9, 
      "border-width":1, 
      "border-color":"black", 
      "cursor":"pointer", 
      "border-radius-top-left":4, 
      "border-radius-top-right":4, 
      "animation":{ 
       "effect":"ANIMATION_SLIDE_BOTTOM" 
      }, 
      "hover-state":{ 
       "alpha":1, 
       "visible":true 
      },     
      valueBox:{}, 
      tooltip:{ 
       "border-color":"#fff", 
       "border-width":1, 
       "border-radius":3, 
       "wrap-text":true, 
       "alpha":0.8, 
       "text":"%node-value % chances in %data-timespan Days for location %kl" 
      } 
     }, 
     "scale-x":{ 
      "zooming":true, 
      "label":{ 
       "text":"Location", 
       "font-color":"#000", 
       "font-size":"16px", 
       "text-align":"center", 
       "background-color":"#fff", 
       paddingTop:20 
      }, 
      "values":[" HYDERABAD"," GURGAON"," JAIPUR"], 
      "line-color":"#CCC", 
      "tick":{ 
       "visible":false 
      }, 
      "guide":{ 
       "line-color":"#666", 
       "line-style":"solid" 
      }, 
      "item":{ 
       "font-family":"arial", 
       "font-color":"#000", 
       "background-color":"rgb(255,255,255)", 
       "padding-top":"4px" 
      } 
     }, 
     "scale-y":{ 
      "zooming":true, 
      "label":{ 
       "text":"Attrition Rate", 
       "font-color":"#2B776C", 
       "font-size":"16px" 
      }, 
      "line-color":"#CCC", 
      "tick":{ 
       "visible":false 
      }, 
      "guide":{ 
       "line-style":"dashed", 
       "line-color":"#ccc" 
      }, 
      "item":{ 
       "font-family":"arial", 
       "font-color":"#8B8B8B" 
      }, 
      "zoom-to":[32.5,34.5] 
     }, 
     "series":[ 
      { 
       "values":[33.59,33.36,32.93], 
       "background-color":"#ff3b3b", 
       "line-color":"#ff3b3b", 
       'data-timespan':30 
      }, 
      { 
       "values":[33.5,33.08,32.93], 
       "background-color":"#ff9b67", 
       "line-color":"#ff9b67", 
       'data-timespan':30 
      }, 
      { 
       "values":[32.91,33.55,34.15], 
       "background-color":"#6cebb3", 
       "line-color":"#6cebb3", 
       'data-timespan':30 
      }, 
      { 
       "values":[32.78,33.33,33.78], 
       "background-color":"#ff3b3b", 
       "line-color":"#ff3b3b", 
       'data-timespan':60 
      }, 
      { 
       "values":[34.04,33.63,32.93], 
       "background-color":"#ff9b67", 
       "line-color":"#ff9b67", 
       'data-timespan':60 
      }, 
      { 
       "values":[33.19,33.04,33.29], 
       "background-color":"#6cebb3", 
       "line-color":"#6cebb3", 
       'data-timespan':60 
      }, 
      { 
       "values":[33.76,32.58,33.51], 
       "background-color":"#ff3b3b", 
       "line-color":"#ff3b3b", 
       'data-timespan':90 
      }, 
      { 
       "values":[32.76,33.98,33.78], 
       "background-color":"#ff9b67", 
       "line-color":"#ff9b67", 
       'data-timespan':90 
      }, 
      { 
       "values":[33.49,33.43,32.71], 
       "background-color":"#6cebb3", 
       "line-color":"#6cebb3", 
       'data-timespan':90 
      } 
     ] 
    }

] } ` Wir werden diese kleinere Fehler verfolgen, aber wir sind sehr beschäftigt mit einem neuen Bau, der bald herauskommt. Ich denke nicht, dass das den Build machen wird. In der Zwischenzeit, wenn Sie eine E-Mail-Adresse haben, die Sie kontaktiert werden möchten, würden wir gerne in Kontakt bleiben und Sie auf dem Laufenden halten. Wir wollen diese Frage nicht mit Fortschritts-Updates spammen, nur eine Lösung.

Quelle

2016-04-25 20:46:27 nardecky

Aber ich denke, dass Bar-Raum und Bar-Breite für Benutzer sehr oft gleichzeitig kommen können. Also werde auf Update warten und in Kontakt mit uns sein: [email protected] –

@AkhileshKumar Wir haben gestern einen neuen Build veröffentlicht. Änderungsprotokoll [hier] (https://www.zechart.com/docs/reference/change-log/). Wir haben die Bar-Space- und Bar-Width-Logik aktualisiert. Lass uns wissen was du denkst! – nardecky

Danke Mann Es hat funktioniert .. Schöne Arbeit .. :) –

ZingChart bar Raum funktioniert nicht

Antwort

Verwandte Themen