javascript - 即使在提供text-align:center之后，Zingchart x轴标签项也未居中对齐

我正在尝试zingchart，但是即使提供了text-align：center，x轴的项也没有居中对齐

我的目的是使项目标签与相应的条居中对齐。它在jsfiddle中工作，但不在我的页面中。

结果如下：


我的图表代码如下：

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

最佳答案

问题是
Zing-chart从父css文件继承过渡属性

我以前的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;
}

我认为在zingchart库中的某个地方，它在创建图表图像之前就忽略了转换的延迟

关于javascript - 即使在提供text-align:center之后，Zingchart x轴标签项也未居中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36996338/