Выравнивание меток в Google ColumnChart

У меня возникли проблемы с попыткой изменить положение меток в этой колоночной диаграмме Google. Диаграмма визуализируется с помощью 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'
                }
            }
        }

javascript google-visualization keen-io
person Phil    schedule 17.12.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Все эти специфичные для Google конфигурации должны находиться внутри объекта 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'
}

Обновление: вам также может понравиться работа с C3.js. Мы добавили адаптер C3 в версии 3.1. Вот jsFiddle, демонстрирующий, как его использовать: http://jsfiddle.net/keen/0mL925vr/

person Dustin    schedule 17.12.2014
comment
Отлично, получилось - спасибо! С3 тоже посмотрю :) - person Phil; 18.12.2014
comment
Отлично, рад слышать это, @Phil! - person Dustin; 19.12.2014