グラフを使用したデータ表現

私はデータ視覚化を含むいくつかのPOCに取り組んでいます。（chart.js、angular.jsの使用）私は、毎週、毎月、毎年のデータを1つのチャートで表示するチャートを探しています。グラフを使用したデータ表現

リンクの実装方法に関するアイディアを教えてください。

ありがとうございます！

出典

2017-07-29 JOESHRA

HTML上のタイプを設定タイプを変更したい場合は、ドリルダウンオプションで意味ですか？ – Sajeetharan

は、piechart、棒グラフなどの種類のグラフが好きです。 – JOESHRA

角を注入してchart.jsを使用することができます。あなただけ

DEMO

angular.module("app", ["chart.js"]) 
 
    .controller("BarCtrl", function($scope) { 
 
    $scope.commonEstimationStats = { 
 
     rates: [{ 
 
     "direction": { 
 
      "id": 13, 
 
      "month": "2016", 
 
      "type": 1 
 
     }, 
 
     "points": 5 
 
     }, { 
 
     "direction": { 
 
      "id": 14, 
 
      "month": "2017", 
 
      "type": 1 
 
     }, 
 
     "points": 3 
 
     }] 
 
    }; 
 
    $scope.labels = []; 
 
    $scope.data = []; 
 
    angular.forEach($scope.commonEstimationStats.rates, function(key, value) { 
 
     $scope.labels.push(key.direction.month); 
 
     $scope.data.push(key.points); 
 
    }) 
 
    $scope.datasetOverride = [{ 
 
     fill: true, 
 
     backgroundColor: [ 
 
     "#66ff33", 
 
     "#36A2EB", 
 
     "#FFCE56" 
 
     ] 
 
    }, { 
 
     fill: true, 
 
     backgroundColor: [ 
 
     "#ffff00", 
 
     "#46BFBD", 
 
     "#FDB45C" 
 
     ] 
 
    }]; 
 
    });

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script> 
 
    <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-controller="BarCtrl"> 
 
    <canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-07-29 04:35:08 Sajeetharan

感謝sajeetharan。私はすでにこれを作成しています。私の唯一の質問は、年、月、週単位で特定のデータを単一のチャートで表現する方法です – JOESHRA

別のシリーズを使用してください – Sajeetharan

これを達成するのに役立つアイデアをお寄せください... – JOESHRA

グラフを使用したデータ表現

答えて

関連する問題