ملصقات رأسية مع Google Charts API؟

Question

أي شخص يعرف كيفية الحصول على تسميات X-Axis لتكون عموديا مع API Google Charts؟

أحتاج إلى احتواء الكثير من الملصقات في مخطط صغير.

شكرًا

Answer 1

لا توفر واجهة برمجة التطبيقات على أي حال للحصول على تسميات محور عشرة (ما لم أفتقدها، لأنني أحتاج إليها أيضا) ما فعلناه هو مزيج من ملصقات نقطة Datapoint وملصقات X-Axis العادية - ليست مثالية ولكنها تعمل

قد تجرب شيئا مثل مخططات Dundas إذا كنت بحاجة إلى مزيد من التحكم

Answer 2

إضافة خيارات المعلمة مع slantedtextangle: 90 درجة لإظهار الملصق عموديا

var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }}

Answer 3

هذا قليلا من الخيط القديم. لكنني كنت أبحث عن هذا نفسي ومرجع هذا ...

https:/developers.google.com/chart/interactive/docs/gallery/areachart#configuration_options..

ابحث عن: haxis.slantedtexnangle و haxis.slantedtext. قم بتعيين زاوية الخاص بك إلى 90 للحصول على عرض عمودي (أو أي شيء بينهما مقابل ميل).

Answer 4

من الممكن الآن

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

Answer 5

طريقة أخرى ممكنة يمكنك "العمل حول" هذه المشكلة هي إضافة محور 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

Answer 6

نص قطري هنا. هذه هي طريقتي في القيام بذلك، آمل أن تساعدهم.

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);
    }

Answer 7

لقد قمت ليس ابحث عن طريقة لتدوير المحور، ومع ذلك، فإن ما قمت به هو تقصير الملصقات ثم قم بإنشاء أسطورة لشرح ما تمثل الملصقات في الواقع.

انقر هنا لعينة جوجل مخطط.

Answer 8

نعم!

تعيين haxis.slantedtext إلى 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",

    });

Answer 9

الحيلة في chartarea.height = 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'
    }
  };