のインストール方法

Question

私はこれが本当にばかげた質問だと知っていますが、プロジェクトで使用するchartjsをインストールする方法はドキュメントを見ていて、インストールする方法やインストール方法、GitHubからダウンロードしました。私はxamppを使用しています。私が正しく理解していれば感謝

Answer 1

チェックこの

...

<script> 


    javascript 

    angular.module("app", ["chart.js"]) 
     // Optional configuration 
     .config(['ChartJsProvider', function (ChartJsProvider) { 
     // Configure all charts 
     ChartJsProvider.setOptions({ 
      chartColors: ['#FF5252', '#FF8A80'], 
      responsive: false 
     }); 
     // Configure all line charts 
     ChartJsProvider.setOptions('line', { 
      showLines: false 
     }); 
     }]) 
     .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) { 

     $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] 
     ]; 
     $scope.onClick = function (points, evt) { 
     console.log(points, evt); 
     }; 

     // Simulate async data update 
     $timeout(function() { 
     $scope.data = [ 
      [28, 48, 40, 19, 86, 27, 90], 
      [65, 59, 80, 81, 56, 55, 40] 
     ]; 
     }, 3000); 
    }]); 
</script> 

</html> 

Answer 2

は、あなたが完全にChartJSを使用することを探しています。 Githubからダウンロードするパッケージには、Distというフォルダがあり、配布ファイルが保存されています。

内部には4つのファイルがあります。 2つは "バンドル"で、Moment.JSは時間スケールに使用されます。他の2人はそうしない。最後に、2つは縮小され、残りは縮小されません。

基本的にChartJSをインストールするには、インストール時に参照されていることを確認するだけです。簡略化のために、ここでChartJSのV2.5のCDNのリンクです：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 

あなたのページのヘッダーに、あなたが今ChartJSを使用できることを含めます。

<canvas id="myChart" width="400" height="400"></canvas> 

最後に、チャートを開始：

私たちが今しなければならないのは、チャートを描画です。

<script> 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
type: 'bar', 
data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
    datasets: [{ 
     label: '# of Votes', 
     data: [12, 19, 3, 5, 2, 3], 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)', 
      'rgba(255, 206, 86, 0.2)', 
      'rgba(75, 192, 192, 0.2)', 
      'rgba(153, 102, 255, 0.2)', 
      'rgba(255, 159, 64, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)', 
      'rgba(75, 192, 192, 1)', 
      'rgba(153, 102, 255, 1)', 
      'rgba(255, 159, 64, 1)' 
     ], 
     borderWidth: 1 
    }] 
}, 
options: { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero:true 
      } 
     }] 
    } 
} 
}); 
</script> 

ページがバーグラフに表示されるようになりました。