2

我正在尝试 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"
                }
            }
        ]
    }
]
}
4

1 回答 1

4

问题是 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 库的某个地方，它在创建图表图像之前忽略了转换延迟

于 2016-05-03T07:05:18.980 回答