离子D3.js饼图不会呈现

有麻烦渲染使用nvd3.js在离子1.0.1 任何帮助饼图可以理解离子D3.js饼图不会呈现

**离子页面代码**

<ion-view class="layouts-view"> 
<!-- <ion-nav-buttons side="left"> 
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 
    --> 
    <ion-nav-back-button > 
     <i class="ion-arrow-left-c"></i> Back 
    </ion-nav-back-button> 
    <ion-nav-title> 
    <span>Report Charts</span> 
    </ion-nav-title> 
    <ion-content> 


     <div class="item item-divider"> 
      Pie chart 2 - interactive 
     </div> 
     <div class="item item-text-wrap" > 
      <nvd3 options="vm.options" data="vm.data3" config="config" ></nvd3> 
     </div> 

    </ion-content>

- 控制器 -

$scope.vm = {}; 

     $scope.vm.data3 = [ 
      { 
       key: "One", 
       y: 5 
      }, 
      { 
       key: "Two", 
       y: 2 
      }, 
      { 
       key: "Three", 
       y: 9 
      }, 
      { 
       key: "Four", 
       y: 7 
      }, 
      { 
       key: "Five", 
       y: 4 
      }, 
      { 
       key: "Six", 
       y: 3 
      }, 
      { 
       key: "Seven", 
       y: 5 
      } 
     ]; 

$scope.vm.options = { 
      chart: { 
       type: 'pieChart', 
       height: 500, 
       x: function(d){return d.key;}, 
       y: function(d){return d.y;}, 
       showLabels: true, 
       duration: 500, 
       labelThreshold: 0.01, 
       labelSunbeamLayout: true, 
       legend: { 
        margin: { 
         top: 5, 
         right: 35, 
         bottom: 5, 
         left: 0 
        } 
       } 
      } 
     };

我的系统信息： 科尔多瓦CLI：6.1.1 咕嘟咕嘟版本：CLI版本3.9.1 咕嘟咕嘟地方：本地版本3.9.1 离子Framework版本：1.0.1 离子CLI版本：2.1.1 离子应用程序库版本：2.1.1 OS：经销商ID：SUSE LINUX说明：openSUSE的飞跃42.1（x86_64的）节点版本：v0.12.7

来源

2016-10-18 Magnus Melwin

使用NDV3或查阅本指南的代码使用D3 with Ionic。

编辑：如果你仍然有问题，那么你可以尝试使用这个命令ionic browser add crosswalk嵌入铬浏览器。我认为你的问题是设备上的浏览器不支持SVG。

来源

2017-03-12 07:20:30

我已经使用NVD3 - 并且从相同的教程中...输出屏幕在上面给出，无法使其工作。 –

您可以尝试使用此命令嵌入Chrome浏览器：“离子浏览器添加人行横道” - 这应该工作，因为我认为您的问题是设备上的浏览器不支持SVG。 –

一直在人行横道上使用它。 –

离子D3.js饼图不会呈现

回答

相关问题