Изменение легенды / ярлыков в Google Chart - PullRequest
Новая
       22

Изменение легенды / ярлыков в Google Chart

1 голос
/ 26 июня 2019

Я извлекаю данные из базы данных через mysqli для создания круговой диаграммы Google.Данные взяты из одного столбца (a1), но каждая запись отличается (например, a, b, c), и я перечисляю процент ответов для каждой записи / ответа.Так, например, a = 20% b = 30%

Каждая запись соответствует другому типу социальных сетей, который мне нужно показать, но не показан в самой базе данных.Есть ли способ изменить легенду диаграммы так, чтобы вместо перечисления A, B, C он заменял ее на собственную метку?(Например, вместо того, чтобы показывать «А», показывать «Facebook»).

мой столбец

мой текущий график

Я пробовал использовать заголовок в данных var, метку в параметрах, легенду вопции.Я чувствую, что что-то упустил 

 <?php  
   $connect = mysqli_connect("localhost", "root", "root", "survey");  
   $query = "SELECT a1, count(*) as number FROM rtp2k GROUP BY a1";  
   $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>  
  <html>  
  <head>  
       <title>Sad me is Sad </title>  
       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
       <script type="text/javascript">  
       google.charts.load('current', {'packages':['corechart']});  
       google.charts.setOnLoadCallback(drawChart);  
       function drawChart()  
       {  
            var data = google.visualization.arrayToDataTable([  
                      ['social', 'number'],  

                      <?php  
                      while($row = mysqli_fetch_array($result))  
                      {  
                           echo "['".$row["a1"]."', ".$row["number"]."],";  
                      }  
                      ?>  
                 ]);  
            var options = {  
                  title: 'Which social networks do you use most often?',  
                  //is3D:true,  
                  pieHole: 0.4,

                 };  
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));  
            chart.draw(data, options);  
       }  
       </script>  
    </head>  
    <body>  
       <br /><br />  
       <div style="width:900px;">  
            <h3 align="center">Make Simple Pie Chart by Google Chart API with PHP Mysql</h3>  
            <br />  
           <div id="piechart" style="width: 900px; height: 500px;">         
         </div>  
     </div>  
   </body>  
</html>

Сейчас моя легенда перечисляет тип по тому, что находится в базе данных (например, a, b, c). Я хотел бы заменить буквы своими собственными.метка / заголовок (например, вместо «а» я бы хотел сказать «Facebook».

1 Ответ

0 голосов
/ 26 июня 2019

Отредактировано для согласованности.

мы можем использовать DataView с вычисляемым столбцом,
для преобразования значений сетевых имен.

Сначала создайте объект для сопоставления значений с именами.

        var socialNetworks = {
          a: 'Facebook',
          b: 'Instagram',
          c: 'LinkedIn'
        };

затем мы создаем DataView из DataTable.

        var view = new google.visualization.DataView(data);

затем используйте метод setColumns, чтобы добавить вычисляемый столбец для преобразования.
мы используем индекс столбца числа, поскольку он не будет изменяться.

        view.setColumns([{
          calc: function (dt, row) {
            return socialNetworks[data.getValue(row, 0)];
          },
          label: 'social',
          type: 'string'
        }, 1]);

, затем используйте DataView, чтобы нарисовать график.

        chart.draw(view, options);

полный фрагмент ... 

        var data = google.visualization.arrayToDataTable([
                  ['social', 'number'],

                  <?php
                  while($row = mysqli_fetch_array($result))
                  {
                       echo "['".$row["a1"]."', ".$row["number"]."],";
                  }
                  ?>
             ]);
        var options = {
              title: 'Which social networks do you use most often?',
              //is3D:true,
              pieHole: 0.4,

             };

        var socialNetworks = {
          a: 'Facebook',
          b: 'Instagram',
          c: 'LinkedIn'
        };

        var view = new google.visualization.DataView(data);
        view.setColumns([{
          calc: function (dt, row) {
            return socialNetworks[data.getValue(row, 0)];
          },
          label: 'social',
          type: 'string'
        }, 1]);

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(view, options);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...