douka19950505 2019-06-26 17:15
浏览 69
已采纳

更改Google Chart中的图例/标签

I am pulling data from a database via mysqli to create a Google pie Chart. The data is from one column (a1), but each entry is different (eg, a, b, c) and I am listing the percentage of responses for each entry/answer. So for instance, a = 20% b = 30%

Each entry corresponds to a different social media type, which I need to show but is not shown in the database itself. Is there a way to change the legend of the chart so that instead of listing A, B, C it would replace that with a custom label? (Eg, instead of showing 'A' show 'Facebook').

my column

my current chart

I have tried using title under var data, label under options, legend under options. I feel like I'm missing something

 <?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>

Right now my legend lists the type by what is in the database, (eg, a, b, c) I would like to replace the letters with my own label/title (eg, instead of 'a', I would like it to say 'Facebook'.

  • 写回答

1条回答 默认 最新

  • douyong1905 2019-06-26 18:02
    关注

    Edited for consistency.

    we can use a DataView with a calculated column,
    to convert the values the network names.

    first, create an object to map the values to the names. 

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

    then we create a DataView from the DataTable. 

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

    then use method setColumns to add a calculated column for the conversion.
    we use the column index of the number, since it won't be changing. 

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

    then use the DataView to draw the chart. 

            chart.draw(view, options);

    full snippet... 

            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);
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。