提问
SAPUI5 SAP Fiori charts graphs google api googlecharts

如何在SAPUI5中使用Google图表

2020-09-05 09:02发布

站内问答 / UI5
1070 3 4

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


你好

我正在尝试在SAPUI5中使用Google图表，但似乎不起作用。

我要去哪里错了？

XML 

 
  
   <页面>
    
     <内容>

JS 

 sap.ui.define（[
  " sap/ui/core/mvc/Controller"，
  " https://www.gstatic.com/charts/loader.js"
 ]，函数（Controller，Google）{
  "使用严格"；
  返回Controller.extend（" com.google.chart.GoogleCharts3.controller.View1"，{
   onInit：函数（）{
    var that = this;
    var oModel = new JSONModel（{
     HTML：" 
 
"
    }）;
    that.getView（）。setModel（oModel）;
    google.chart.load（"当前"，{
     "包裹"：[" corechart"]
    }）;
    google.charts.setOnLoadCallBack（drawChart）;
   }，
   drawChart：function（）{
    var that = this;
    var data = new google.visualization.DataTable（）;
    data.addColumn（" string"，" Topping"）;
    data.addColumn（" number"，" Slices"）;
    data.addRows（[
     ["蘑菇"，" 3"]，
     ["洋葱"，" 1"]，
     ["橄榄"，" 1"]，
     ["西葫芦"，" 1"]，
     ["意大利辣味香肠"，" 2"]
    ]）;
    var options = {
     " title"："我昨晚吃了多少比萨"，
     " width"：" 400"，
     "身高"：" 300"
    };
    var chart = new google.visualization.PieChart（that.getView（）。byId（" iPanel"））;
    chart.draw（数据，选项）;
   }，
  }）;
 }）;

谢谢

Siddharth

PS：我正在使用Google指南来进行此操作： https://developers.google.com/chart/interactive/docs/quick_start

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


你好

我正在尝试在SAPUI5中使用Google图表，但似乎不起作用。

我要去哪里错了？

XML 

 
  
   <页面>
    
     <内容>

JS 

 sap.ui.define（[
  " sap/ui/core/mvc/Controller"，
  " https://www.gstatic.com/charts/loader.js"
 ]，函数（Controller，Google）{
  "使用严格"；
  返回Controller.extend（" com.google.chart.GoogleCharts3.controller.View1"，{
   onInit：函数（）{
    var that = this;
    var oModel = new JSONModel（{
     HTML：" 
 
"
    }）;
    that.getView（）。setModel（oModel）;
    google.chart.load（"当前"，{
     "包裹"：[" corechart"]
    }）;
    google.charts.setOnLoadCallBack（drawChart）;
   }，
   drawChart：function（）{
    var that = this;
    var data = new google.visualization.DataTable（）;
    data.addColumn（" string"，" Topping"）;
    data.addColumn（" number"，" Slices"）;
    data.addRows（[
     ["蘑菇"，" 3"]，
     ["洋葱"，" 1"]，
     ["橄榄"，" 1"]，
     ["西葫芦"，" 1"]，
     ["意大利辣味香肠"，" 2"]
    ]）;
    var options = {
     " title"："我昨晚吃了多少比萨"，
     " width"：" 400"，
     "身高"：" 300"
    };
    var chart = new google.visualization.PieChart（that.getView（）。byId（" iPanel"））;
    chart.draw（数据，选项）;
   }，
  }）;
 }）;

谢谢

Siddharth

PS：我正在使用Google指南来进行此操作： https://developers.google.com/chart/interactive/docs/quick_start

付费偷看设置
发送
3条回答
大道至简
1楼 · 2020-09-05 09:20.采纳回答

好吧，首先，您不能像在导入view1.controller.js中那样仅包含一个外部js文件，建议您下载该文件并将其本地导入，或在索引中添加以下行 .html：

接下来，我不知道为什么要在模型中定义HTML div，我将继续进行讨论，并给出我如何使其工作的示例。

首先，在您的onInit函数中，将Google部分替换为以下内容：

 var loading = google.charts.load（'current'，{'packages'：['corechart']}））;
                     loading.then（function（）{
                         this.drawChart（）;
                     } .bind（this））;

^^用于设置回调的函数似乎没有起作用，但是无论如何使用promise都更好。

然后在您的drawChart函数内部：

 drawChart：function（）{
             //创建数据表。
              var data = new google.visualization.DataTable（）;
              data.addColumn（'string'，'Topping'）;
              data.addColumn（'number'，'Slices'）;
              data.addRows（[
                ['Mushrooms'，3]，
                ['洋葱'，1]，
                ['Olives'，1]，
                ['西葫芦'，1]，
                ['Pepperoni'，2]
              ]）;
     
             //设置图表选项
              var options = {'title'："昨晚我吃了多少比萨"，
                             '宽度'：400，
                             'height'：300};

             //实例化并绘制图表，并传递一些选项。
              var chart = new google.visualization.PieChart（this.getView（）。byId（" myHBox"）。getDomRef（））;
              chart.draw（数据，选项）;
         }，

请注意，在使用this.getView（）。byId（）的内部UI5函数时，我已经用函数.getDomRef（）替换了" document.getElementById"，在XML中，我简单地使用了ID为 如下所示：" myHBox"：

尝试一下，让我知道你的生活。

SKY徐
2楼-- · 2020-09-05 09:43
Nathan Hand ，

是的，我一直在从不同的来源阅读它，以了解它。

对不起，我之前没有回复，我还被分配了另一项工作，这引起了我的全部关注。

非常感谢您所做的一切。 ：）

致谢

Siddharth

大道至简
3楼-- · 2020-09-05 09:30

如何将饼图绑定到sapui5中的块布局单元？ 看到图片...。

一周热门 更多>

点击此处---> EasySAP.com 一起学习S4 HANA ...