Zingchart X軸ラベルの項目が集中しても、テキストallignを提供した後、整列されていない：中央

Question

私はzingchartをしようとしているが、x軸の項目が集中しても、それをテキスト整列を提供した後に整列されていない：中央

私の目的は、アイテムのラベルを対応するバーの中央に揃えることです。それはjsfiddleで動作していますが、私のページでは動作していません。次のようにチャートの

私のコードは次のとおりです：次のように

結果は

問題が ジング・チャートは、親cssファイルからの遷移プロパティを継承しているということでした

{ 
"graphset":[ 
    { 
     "type":"bar", 
     "plotarea":{ 
      "adjust-layout":true 
     }, 
     "background-color":"#fff", 
     "plot":{ 
      "alpha":0.9, 
      "cursor":"pointer", 
      "bar-width":"20px", 
      "line-width":2, 
      "bar-space":"50px", 
      "background-fit":"x", 
      "animation":{ 
       "effect":"ANIMATION_SLIDE_RIGHT" 
      }, 
      "value-box":{ 
       "visible":true, 
       "font-size":"10px" 
      } 
     }, 
     "scale-x":{ 
      "zooming":true, 
      "label":{ 
       "text":"Designation", 
       "font-color":"#000", 
       "font-size":"16px", 
       "text-align":"center", 
       "background-color":"#fff", 
       "width":"100%", 
       "position":"absolute", 
       "bottom":"0" 
      }, 
      "values":[" ASSISTANT MANAGER"," MANAGEMENT TRAINEE/BUSINESS ANALYSIST"," MANAGER"], 
      "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":"100px", 
       "text-align":"center", 
       "background-color":"rgb(255,255,255)", 
       "padding-top":"4px" 
      } 
     }, 
     "scale-y":{ 
      "zooming":true, 
      "label":{ 
       "text":"Attrition Rate (%age)", 
       "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":[5,70] 
     }, 
     "series":[ 
      { 
       "values":[29.47,29.93,30.73], 
       "background-color":"#ff3b3b", 
       "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 designation %kl" 
       } 
      }, 
      { 
       "values":[20.11,20.63,19], 
       "background-color":"#ff9b67", 
       "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 designation %kl" 
       } 
      }, 
      { 
       "values":[50.43,49.45,50.27], 
       "background-color":"#6cebb3", 
       "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 designation %kl" 
       } 
      } 
     ] 
    } 
] 
} 

Answer 1

以前のCSSは

*{ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
} 

以下のように変更しました。それはmyChartは私のチャートの「ID」

*:not(#myChart *){ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
} 

ここで私は、このためにjsfiddle持つことができ、私はそれがチャート画像