Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/413.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Google ColumnChart中的标签对齐_Javascript_Google Visualization_Keen Io - Fatal编程技术网

Javascript Google ColumnChart中的标签对齐

Javascript Google ColumnChart中的标签对齐,javascript,google-visualization,keen-io,Javascript,Google Visualization,Keen Io,我在尝试更改此谷歌柱形图中标签的位置时遇到问题。图表通过Keen.io JS SDK呈现。我有一个非常紧凑的空间来工作,我试图将标签放在图表下方,而不是右边(标签文本被截断)。这是一个截图- 我在下面包含了我的配置对象。是否有一个选项我遗漏了-似乎没有什么东西可以改变标签的右侧。谢谢 { chartType: 'columnchart', chartOptions: { isStacked: true

我在尝试更改此谷歌柱形图中标签的位置时遇到问题。图表通过Keen.io JS SDK呈现。我有一个非常紧凑的空间来工作,我试图将标签放在图表下方,而不是右边(标签文本被截断)。这是一个截图-

我在下面包含了我的配置对象。是否有一个选项我遗漏了-似乎没有什么东西可以改变标签的右侧。谢谢

{
            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!