更改Google图表中的图例/标签

时间:2019-06-26 17:15:48

标签: php mysqli google-visualization

我正在通过mysqli从数据库中提取数据以创建Google饼图。数据来自一栏(a1),但每个条目都不相同(例如a,b,c),我列出了每个条目/答案的响应百分比。 例如 a = 20% b = 30%

每个条目对应一个不同的社交媒体类型,我需要显示该类型,但不会在数据库本身中显示。有没有一种方法可以更改图表的图例,以代替使用自定义标签代替列表A,B,C? (例如,不要显示“ A”显示“ Facebook”)。

my column

my current chart

我尝试在var数据下使用title,在选项下使用label,在选项下使用图例。我觉得我想念什么

 <?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)。我想用自己的标签/标题替换字母(例如,我可以用“ a”代替“ a”)喜欢说“ Facebook”。

1 个答案:

答案 0 :(得分:0)

为保持一致性而编辑。

我们可以在计算列中使用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);