Javascript 如何在爱奥尼亚制作三维图形？_Javascript_Angularjs_Ionic Framework

Javascript 如何在爱奥尼亚制作三维图形？

javascript angularjs ionic-framework

Javascript 如何在爱奥尼亚制作三维图形？,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我有以下目标 var x = [{ "time": 8, "projects": "creat" }, { "time": 6, "projects": "tracker" }, { "time": 2, "projects": "study" }] 我想制作3D图形（pie），在其中时间应该显示在pie图形的相应区域中，当我单击特定区域时，该部分应该从pie图表中弹出。每个部分的颜色应该不同。有人能用小提琴或密码笔来做吗创建新的爱奥尼亚框架项目- i

我有以下目标

var x = [{
"time": 8,
"projects": "creat"
       }, {
"time": 6,
"projects": "tracker"
       }, {
"time": 2,
"projects": "study"
    }]

我想制作3D图形（pie），在其中时间应该显示在pie图形的相应区域中，当我单击特定区域时，该部分应该从pie图表中弹出。每个部分的颜色应该不同。

有人能用小提琴或密码笔来做吗

创建新的爱奥尼亚框架项目-

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

然后-www/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link rel="stylesheet" href="css/angular-chart.css">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/Chart.min.js"></script>
        <script src="js/angular-chart.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
        </ion-pane>
    </body>
</html>

接下来，下拉到文件下方，创建一个名为ExampleController的新控制器，代码如下（在www/js/app.js）：

返回www/index.html文件，找到

标记，并用以下内容替换它们：

<ion-content ng-controller="ExampleController">
    <div class="card">
        <div class="item item-divider">
            A line chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="item item-divider">
            A bar chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
</ion-content>


折线图
条形图

然后你会得到你想要的输出，就像这样-

还有这个-

想一想，你有你的答案：）

更新-

有关此主题的视频教程可以在中找到。

您可以发布更多js代码吗？您可以访问

.controller("ExampleController", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];

});

<ion-content ng-controller="ExampleController">
    <div class="card">
        <div class="item item-divider">
            A line chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="item item-divider">
            A bar chart
        </div>
        <div class="item item-text-wrap">
            <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
        </div>
    </div>
</ion-content>