我正在尝试 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"
}
}
]
}
]
}
最佳答案
问题是 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 - 即使提供文本对齐后，Zingchart x 轴标签项也没有居中对齐 :center，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36996338/