Как повернуть гистограмму, чтобы я мог показывать прямо в Google Chart? - PullRequest
Новая
       12

Как повернуть гистограмму, чтобы я мог показывать прямо в Google Chart?

0 голосов
/ 12 июня 2018

enter image description here

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

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    google.charts.load('current', {
          packages: ['corechart']
        }).then(function () {
          $.ajax({
            url: 'http://localhost:8080/FRA-UI/api/report34graph/all',
            dataType: 'json'
          }).done(function (jsonData) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'realname');
            data.addColumn('number', 'qualityone');
            data.addColumn('number', 'qualitytwo');
            data.addColumn('number', 'qualitythree');


            $.each(jsonData, function (index, row) {
              data.addRow([
                row.realName,
                row.qualityOne,
                row.qualityTwo,
                row.qualityThree
              ]);
            });

         // Optional; add a title and set the width and height of the chart
           // var options = {'title':'My Average Day', 'width':550, 'height':400};


            var logOptions = {
                    title: 'Number of stems by DBH class',

                    legend: 'none',
                    width: 2000,
                    height: 700,
                    pointSize: 5,

                    series: {
                          0: { pointShape: 'circle' },


                      },
                    hAxis: {
                      title: 'DBH classes'

                    },

                    vAxis: {
                      title: 'No of stems/ha',
                      ticks: [0, 50, 100,150,200,250,300,350,400,450,500,550,600]
                    }
                  };

            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, logOptions);
          });
        });
    </script>

  </head>
<title></title>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" ></div>
  </body>

</html>

Данные json, которые я получаю: 

[{"realName":"005-10","qualityOne":0.35,"qualityTwo":1.34,"qualityThree":5.45},{"realName":"010-20","qualityOne":3.84,"qualityTwo":6.46,"qualityThree":16.33},{"realName":"020-30","qualityOne":33.74,"qualityTwo":21.93,"qualityThree":18.0},{"realName":"50<diameter","qualityOne":98.7,"qualityTwo":14.13,"qualityThree":12.14}]

1 Ответ

0 голосов
/ 12 июня 2018

Похоже, вы используете неверный тип диаграммы.

Проверьте столбцовую диаграмму для вертикального позиционирования.

https://developers.google.com/chart/interactive/docs/gallery/columnchart

...