Question

在Ionic 1.0.1中使用nvd3.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>

- CONTROLLER -

$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
                    }
                }
            }
        };

我的系统信息： Cordova CLI：6.1.1 Gulp版本：CLI版本3.9.1 Gulp local：本地版本3.9.1 离子框架版本：1.0.1 Ionic CLI版本：2.1.1 Ionic App Lib版本：2.1.1 操作系统：分销商ID：SUSE LINUX描述：openSUSE Leap 42.1（x86_64）节点版本：v0.12.7

Answer 1

使用NDV3或查看本指南，了解使用D3 with Ionic的代码。

修改：如果您仍然遇到问题，可以尝试使用此命令ionic browser add crosswalk嵌入Chrome网络浏览器。我认为您的问题是设备上的浏览器不支持SVG。

Ionic D3.js饼图无法呈现

1 个答案: