Вертикальные метки с Google charts API?

Question

Вертикальные метки с Google charts API?

Кто-нибудь знает, как сделать метки оси x вертикальными с помощью Google charts API?

Мне нужно поместить много меток в небольшой график.

Спасибо

786 9

graph api google-visualization

9 ответов:

Comments

Ничего не найдено.

braindice · Accepted Answer · 2009-04-24 20:14:44

API не предоставляет в любом случае, чтобы получить метки оси X вертикали (если я не пропустил его, потому что он мне тоже нужен) то, что мы сделали, было комбинацией меток точек datapoint и обычных меток оси x - не идеально, но работает

Может попробовать что-то вроде диаграмм Дандаса, если вам нужно больше контроля

milind Morey · Accepted Answer · 2014-04-29 09:42:37

Добавьте параметры параметра с наклонным textangle: 90 градусов, чтобы показать метку вертикально
var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }}

clarson · Accepted Answer · 2012-11-28 00:29:04

Это немного старая нить. но я искал это сам и наткнулся на это...

Https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options

Искать: hAxis.slantedTextAngle и hAxis.наклонный текст. Установите угол 90 для вертикального отображения (или что-нибудь между ними для наклона).

Mehul Gayate · Accepted Answer · 2014-04-29 09:42:20

Теперь это возможно

var options = {
  title: "Test",
   hAxis: {
        direction:-1,
        slantedText:true,
        slantedTextAngle:90 // here you can even use 180
    }
};

xbakesx · Accepted Answer · 2011-04-05 23:19:00

Еще один возможный способ обойти эту проблему-добавить ось x:
chxt=x,y
Может измениться на:
chxt=x,y,x
(Убедитесь, что все, что вы сделали с исходной осью x, было применено одинаково), затем установите метки через каждые две оси и через каждые две смещения по одной оси x (или через каждую третью, в зависимости от длины меток).
chx1=0:|Alpha||Gamma||Epsilon||Eta|2:||Beta||Delta||Zeta
Обратите внимание на два || для пустой метки между ними. Таким образом, на вашем графике метки отключают оси, и у вас есть немного больше места:
Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

Gonzalo Del Carpio · Accepted Answer · 2016-04-24 17:51:32

Диагональный текст здесь. Это мой способ сделать это, я надеюсь, что это поможет им.

Https://jsfiddle.net/8tvm9qk5/

Код:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

И

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Departamentos');
      data.addColumn('number', 'Entregados');
      data.addColumn('number', 'En Stock');

      data.addRows([
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786],
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786]


      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        height:600,
        chartArea: {
            height:300,
          top:100,
        },
        hAxis: {
          title: 'Departamentos',
          titleTextStyle: {
            color: '#FF0000',            
          },

          slantedText:true,
          slantedTextAngle:45,

        },
        vAxis: {
          title: 'Kits'
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Zac · Accepted Answer · 2010-12-01 08:03:48

Я Не нашел способ повернуть ось, однако то, что я сделал, - это укоротил метки, а затем создал легенду, чтобы объяснить, что на самом деле представляют собой метки.

Нажмите здесь для примера диаграммы Google.

Jason · Accepted Answer · 2014-05-22 21:44:32

Да!

Установить hAxis.наклоните текст к true, а затем установите hAxis.slantedTextAngle=90. Вот так...

var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
    ac.draw(data, {
      title : 'Equipment Performance Chart',
      isStacked:true,
      vAxis: {
        viewWindowMode: 'explicit',
        viewWindow: {
            max: 100
            },
        title: "Percentage"
        },
      hAxis: {
        title: "Area",
        slantedText:true,
        slantedTextAngle:90
        },
      seriesType: "bars",

    });

Gonzalo Del Carpio · Accepted Answer · 2016-04-23 01:05:18

Фокус в картарее.высота = 300 и chartArea.top = 100, высота: 600

var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    height:600,
    chartArea: {
        height:300,
        top:100,
    },
    hAxis: {
      title: 'Departamentos',
      titleTextStyle: {
        color: '#FF0000',            
      },

      slantedText:true,
      slantedTextAngle:45,

    },
    vAxis: {
      title: 'Kits'
    }
  };