更改Google Chart中的图例/标签

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (135)

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

每个条目对应一个不同的社交媒体类型,我需要显示它,但不会在数据库本身中显示。有没有办法更改图表的图例,以便它不会列出A,B,C而是用自定义标签替换它?(例如,而不是显示'A'显示'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)我想用自己的标签/标题替换字母(例如,而不是'a',我希望它说'Facebook'。

提问于
用户回答回答于

编辑一致性。

我们可以使用DataView带有计算列的a 来转换网络名称的值。

首先,创建一个对象以将值映射到名称。

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

然后我们创建一个DataViewDataTable

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

热门问答

TSF微服务无法查看JVM监控,显示空白?

工口Miku说唱歌手
推荐
回答来自于问答智囊团成员:邓愉悦 专栏:https://cloud.tencent.com/developer/user/6835587 原因分析 1、tsf-agent 版本过低。 使用 JVM 监控功能时,实例的 tsf-agent 需为 1.21.0 ...... 展开详请

直播推流失败,什么原因导致的呢?

青蛙克星哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
推荐
回答来自于问答智囊团成员:clairehou 专栏:https://cloud.tencent.com/developer/column/89786 经常会收到客户咨询,直播推流失败是什么原因导致。从云直播使用步骤上来讲,直播推流作为第一步,如果推流失败,后续的转码、录制、播放等...... 展开详请

视频播着播着就卡住了,什么原因造成的呢?

推荐
回答来自于问答智囊团成员:bellchen 专栏:https://cloud.tencent.com/developer/article/1734074 猜想 导致视频播放卡顿的原因有千千万万,常见的有如下: 1、网络较差,导致视频下载较慢,需要缓冲,因此卡住了; 可以下载文件到...... 展开详请

云通信图片语音消息发送失败,错误码70402?

宅女have fun……
推荐
回答来自于问答智囊团成员:linpeiyang@云通信 专栏:https://cloud.tencent.com/developer/article/1750251 客户提到文字信息没有失败,说明消息上行到云通信IM后台 -> 云通信IM后台处理 -> 云通信IM后台下发消息给用...... 展开详请

即时通信如何像QQ一样实现加好友、备注、进行好友分组?

五星格兰特就事论事不撕逼!三观不合删评价!
推荐
回答来自于问答智囊团成员:linpeiyang@云通信 专栏:https://cloud.tencent.com/developer/article/1750251 即时通信IM默认有2种关系链 好友 黑名单 均可以通过以下两种方式实现增删改查的功能: 调用REST API 调用...... 展开详请

CPU负载100%,但并看不到具体哪个进程导致的,?

鸿鹄认真生活 做出美好的产品 App/VR/美国市场
推荐
回答来自于问答智囊团成员:何刚 专栏:https://cloud.tencent.com/developer/user/6827370 安全分析 1、隐藏进程 经过busybox核实到存在隐藏进程,百度核实为挖矿病毒 📷 2、crontab 存在异常任务 📷 下载链接已经失效,I...... 展开详请

扫码关注云+社区

领取腾讯云代金券