ZingChartバースペースが

Question

動作しない私は、データを次のようにzingchartをレンダリングしています：

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

、私はまだそれのバーバー空間は50pxを与えていた

を次のように互いに近接しています

バーの中にマージンを与える方法はありますか？

Answer 1

私は現在、ZingChartチームのメンバーです。あなたのリクエストを確認しました。軽い掘り下げと正しいテストの後、「バースペース」はバーの間のマージンを調整しません。今、私たちの図書館では、「バー幅」と「バースペース」がお互いに共存することはできないようです。バーの動的サイズを維持しながら、ユーザーが両方の属性を同時に調整できるようにする計算がたくさんありますが、それは簡単ではありません。私はあなたがこれらの設定で達成しようとしている外観を尋ねたいと思いますか？私はあなたのJSONのいくつかの冗長性をきれいにして、もっと小さくしました。このデモグラフでは、 'bar-width' &の 'bar-space'属性は省略されています。デフォルトの動作では、あなたのグラフは次のようになります。 http://demos.zingchart.com/view/O3M6RCTF

私はここに添付JSONを持っている：

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

] } ` 私たちは、このマイナーなバグを追求しようとしているが、私たちは非常にあります間もなく新しいビルドが忙しい。私はこれがビルドをするとは思わない。その間にあなたが連絡を取りたい方のEメールアドレスをお持ちであれば、私たちは連絡を取り合い、最新の情報をお届けしたいと考えています。私たちは進捗状況の更新でこの質問をスパムしたくない、単なる解決策です。