離子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餅圖不會呈現

回答

相關問題