即使在提供 text-align:center 后，Zingchart x 轴标签项目也没有居中对齐

Question

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

我的目标是使项目标签与相应的栏居中对齐。它在 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"
                }
            }
        ]
    }
]
}

Answer 1

问题是 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 库中的某处忽略了创建图表图像之前的过渡延迟

即使在提供 text-align:center 后，Zingchart x 轴标签项目也没有居中对齐

Zingchart x-axis label item are not centrally aligned even after providing text-allign:center

javascript

json

zingchart