Javascript ZingChart条空间不工作
我正在使用以下数据渲染zingchart:Javascript ZingChart条空间不工作,javascript,charts,zingchart,Javascript,Charts,Zingchart,我正在使用以下数据渲染zingchart: { "graphset":[ { "type":"bar", "plotarea":{ "adjust-layout":true, "mask-tolerance":[0,0] }, "background-color":"#fff", "plot":{ "alpha":0.9,
{
"graphset":[
{
"type":"bar",
"plotarea":{
"adjust-layout":true,
"mask-tolerance":[0,0]
},
"background-color":"#fff",
"plot":{
"alpha":0.9,
"border-width":1,
"stacked":true,
"border-color":"black",
"cursor":"pointer",
"border-radius-top-left":4,
"border-radius-top-right":4,
"bar-width":"20px",
"line-width":2,
"bar-space":"50px",
"background-fit":"x",
"animation":{
"effect":"ANIMATION_SLIDE_BOTTOM"
},
"hover-state":{
"alpha":1,
"visible":true
}
},
"scale-x":{
"zooming":true,
"label":{
"text":"Location",
"font-color":"#000",
"font-size":"16px",
"text-align":"center",
"background-color":"#fff",
"width":"100%",
"position":"absolute",
"bottom":"0"
},
"values":[" HYDERABAD"," GURGAON"," JAIPUR"],
"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":"190px",
"text-align":"center",
"background-color":"rgb(255,255,255)",
"padding-top":"4px"
}
},
"scale-y":{
"zooming":true,
"label":{
"text":"Attrition Rate",
"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":[32.5,34.5]
},
"series":[
{
"values":[33.59,33.36,32.93],
"stack":1,
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
"marker":{
"background-color":"#ff3b3b",
"size":3
},
"value-box":{
"font-color":"#ff3b3b",
"visible":true
},
"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 location %kl"
},
"palette":0
},
{
"values":[33.5,33.08,32.93],
"stack":2,
"background-color":"#ff9b67",
"line-color":"#ff9b67",
"marker":{
"background-color":"#ff9b67",
"size":4
},
"value-box":{
"font-color":"#ff9b67",
"visible":true
},
"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 location %kl"
},
"palette":1
},
{
"values":[32.91,33.55,34.15],
"stack":3,
"background-color":"#6cebb3",
"line-color":"#6cebb3",
"marker":{
"background-color":"#6cebb3",
"size":5
},
"value-box":{
"font-color":"#6cebb3",
"visible":true
},
"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 location %kl"
},
"palette":2
},
{
"values":[32.78,33.33,33.78],
"stack":4,
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
"marker":{
"background-color":"#ff3b3b",
"size":3
},
"value-box":{
"font-color":"#ff3b3b",
"visible":true
},
"tooltip":{
"background-color":"#ff3b3b",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 60 Days for location %kl"
},
"palette":3
},
{
"values":[34.04,33.63,32.93],
"stack":5,
"background-color":"#ff9b67",
"line-color":"#ff9b67",
"marker":{
"background-color":"#ff9b67",
"size":4
},
"value-box":{
"font-color":"#ff9b67",
"visible":true
},
"tooltip":{
"background-color":"#ff9b67",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 60 Days for location %kl"
},
"palette":4
},
{
"values":[33.19,33.04,33.29],
"stack":6,
"background-color":"#6cebb3",
"line-color":"#6cebb3",
"marker":{
"background-color":"#6cebb3",
"size":5
},
"value-box":{
"font-color":"#6cebb3",
"visible":true
},
"tooltip":{
"background-color":"#6cebb3",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 60 Days for location %kl"
},
"palette":5
},
{
"values":[33.76,32.58,33.51],
"stack":7,
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
"marker":{
"background-color":"#ff3b3b",
"size":3
},
"value-box":{
"font-color":"#ff3b3b",
"visible":true
},
"tooltip":{
"background-color":"#ff3b3b",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 90 Days for location %kl"
},
"palette":6
},
{
"values":[32.76,33.98,33.78],
"stack":8,
"background-color":"#ff9b67",
"line-color":"#ff9b67",
"marker":{
"background-color":"#ff9b67",
"size":4
},
"value-box":{
"font-color":"#ff9b67",
"visible":true
},
"tooltip":{
"background-color":"#ff9b67",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 90 Days for location %kl"
},
"palette":7
},
{
"values":[33.49,33.43,32.71],
"stack":9,
"background-color":"#6cebb3",
"line-color":"#6cebb3",
"marker":{
"background-color":"#6cebb3",
"size":5
},
"value-box":{
"font-color":"#6cebb3",
"visible":true
},
"tooltip":{
"background-color":"#6cebb3",
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in 90 Days for location %kl"
},
"palette":8
}
]
}
]
}
我已经给了酒吧空间50px,但它的酒吧是接近彼此如下
我想知道,如何在酒吧内提供利润?我目前是ZingChart团队的一名成员,已经审阅了您的请求。经过一些轻微的挖掘和测试,你是正确的,“酒吧空间”不会调整酒吧之间的利润。现在在我们的图书馆里,“酒吧宽度”和“酒吧空间”似乎不能共存。在允许用户同时调整两个属性的同时,要保持条形图的动态大小需要进行大量计算,这并不容易。我想问一下,通过这些设置,您想要达到什么样的效果?我已经清理了JSON中的一些冗余,使其更小。此演示图省略了“条形宽度”和“条形空间”属性。使用默认行为,图表将如下所示: 我在这里附上了JSON:
{
"graphset":[
{
"type":"bar",
"plotarea":{
"adjust-layout":true,
"mask-tolerance":[0,0]
},
"background-color":"#fff",
"plot":{
"alpha":0.9,
"border-width":1,
"border-color":"black",
"cursor":"pointer",
"border-radius-top-left":4,
"border-radius-top-right":4,
"animation":{
"effect":"ANIMATION_SLIDE_BOTTOM"
},
"hover-state":{
"alpha":1,
"visible":true
},
valueBox:{},
tooltip:{
"border-color":"#fff",
"border-width":1,
"border-radius":3,
"wrap-text":true,
"alpha":0.8,
"text":"%node-value % chances in %data-timespan Days for location %kl"
}
},
"scale-x":{
"zooming":true,
"label":{
"text":"Location",
"font-color":"#000",
"font-size":"16px",
"text-align":"center",
"background-color":"#fff",
paddingTop:20
},
"values":[" HYDERABAD"," GURGAON"," JAIPUR"],
"line-color":"#CCC",
"tick":{
"visible":false
},
"guide":{
"line-color":"#666",
"line-style":"solid"
},
"item":{
"font-family":"arial",
"font-color":"#000",
"background-color":"rgb(255,255,255)",
"padding-top":"4px"
}
},
"scale-y":{
"zooming":true,
"label":{
"text":"Attrition Rate",
"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":[32.5,34.5]
},
"series":[
{
"values":[33.59,33.36,32.93],
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
'data-timespan':30
},
{
"values":[33.5,33.08,32.93],
"background-color":"#ff9b67",
"line-color":"#ff9b67",
'data-timespan':30
},
{
"values":[32.91,33.55,34.15],
"background-color":"#6cebb3",
"line-color":"#6cebb3",
'data-timespan':30
},
{
"values":[32.78,33.33,33.78],
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
'data-timespan':60
},
{
"values":[34.04,33.63,32.93],
"background-color":"#ff9b67",
"line-color":"#ff9b67",
'data-timespan':60
},
{
"values":[33.19,33.04,33.29],
"background-color":"#6cebb3",
"line-color":"#6cebb3",
'data-timespan':60
},
{
"values":[33.76,32.58,33.51],
"background-color":"#ff3b3b",
"line-color":"#ff3b3b",
'data-timespan':90
},
{
"values":[32.76,33.98,33.78],
"background-color":"#ff9b67",
"line-color":"#ff9b67",
'data-timespan':90
},
{
"values":[33.49,33.43,32.71],
"background-color":"#6cebb3",
"line-color":"#6cebb3",
'data-timespan':90
}
]
}
]
}
`
我们将继续研究这个小错误,但我们正忙于即将推出的新版本。我不认为这将使该建设。同时,如果你有一个电子邮件地址,你喜欢被联系出来,我们会很乐意保持联系,让你更新。我们不想在这个问题上发布进度更新,这只是一个解决方案。通过插件文档搜索,你会得到一些可以覆盖的
类。
。我搜索并尝试了很多组合,但没有效果。但我认为对于用户来说,条空间和条宽度可能经常同时出现。因此将等待更新,让我们通过邮件联系:akhileshcoder@gmail.com@AkhileshKumar我们昨天发布了一个新版本。更改日志。我们已经更新了条空间和条宽度逻辑。让我们知道你的想法!