Javascript Google ColumnChart中的标签对齐
我在尝试更改此谷歌柱形图中标签的位置时遇到问题。图表通过Keen.io JS SDK呈现。我有一个非常紧凑的空间来工作,我试图将标签放在图表下方,而不是右边(标签文本被截断)。这是一个截图- 我在下面包含了我的配置对象。是否有一个选项我遗漏了-似乎没有什么东西可以改变标签的右侧。谢谢Javascript Google ColumnChart中的标签对齐,javascript,google-visualization,keen-io,Javascript,Google Visualization,Keen Io,我在尝试更改此谷歌柱形图中标签的位置时遇到问题。图表通过Keen.io JS SDK呈现。我有一个非常紧凑的空间来工作,我试图将标签放在图表下方,而不是右边(标签文本被截断)。这是一个截图- 我在下面包含了我的配置对象。是否有一个选项我遗漏了-似乎没有什么东西可以改变标签的右侧。谢谢 { chartType: 'columnchart', chartOptions: { isStacked: true
{
chartType: 'columnchart',
chartOptions: {
isStacked: true
},
fontName : 'Helvetica',
fontSize : '11px',
width : 270,
height : 220,
chartArea : {
left : 0,
top : 0,
width : '100%',
height : '100%'
},
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : 'PROFILE VIEWS',
vAxis : {
viewWindowMode : 'maximized',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'none'
},
hAxis : {
viewWindowMode : 'maximized',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'bottom',
textStyle : {
color : '#cccccc',
fontName : 'Helvetica',
fontSize : '11px'
}
}
}
所有这些谷歌特有的配置都应该放在
chartOptions
对象中。请尝试一下,让我知道进展如何:
{
chartType: 'columnchart',
chartOptions: {
fontName : 'Helvetica',
fontSize : '11px',
isStacked: true,
chartArea : {
left : 0,
top : 0,
width : '100%',
height : '100%'
},
vAxis : {
viewWindowMode : 'maximized',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'none'
},
hAxis : {
viewWindowMode : 'maximized',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'bottom',
textStyle : {
color : '#cccccc',
fontName : 'Helvetica',
fontSize : '11px'
}
}
},
width : 270,
height : 220,
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : 'PROFILE VIEWS'
}
更新:您可能还喜欢与更多人一起工作。。我们在v3.1中添加了一个C3适配器。这里有一个jsFiddle演示如何使用它:太好了,这就完成了-谢谢!我也来看看C3:)太好了,很高兴听到@Phil!