Question

我将Chart.js实施到我的AngularJS应用程序中，并且我将图表数据从服务器API加载到$scope.chartData这是一个数字数组。

我需要从Chart.js访问这个变量，并使用他们网站上的脚本示例，我不知道如何访问变量。尝试类似的事情：

home.html做为：

＆＃13;

<!-- A bunch of HTML, then -->

<canvas id="myChart" width="400" height="400"></canvas>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Balance',
            data: {{chartData}}, //this is where I need to access the variable
            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>

＆＃13;

将这些数据加载到图表脚本中的最佳方法（不是解决方法）是什么？

Answer 1

您应该使用库 angular-chart.js 以便与angularjs一起使用。

您可以将数据部分分配给选项配置。

<强>样本

angular.module("app", ["chart.js"])


.controller("ChartCtrl", function($scope) {
  $scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
  $scope.chartOptionsPercent = {
    title: {
      display: true,
      text: "Downtime Percentage of Equipment",
      fontSize: 20
    },
    legend: {
      text: "Hello"
    },
    tooltips: {
      enabled: false
    },
   
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        position: 'left',
        ticks: {
          min: 0,
          max: 100
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Name of Equipment'
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Percentage of Downtime (%)'
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }]
    }
  }
  $scope.dataPercent = [5, 6, 7, 12];


});

<!DOCTYPE html>
<html>
<head>
  <title>radar Chart</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>   
</head>
<body ng-app="app">
  <div ng-controller="ChartCtrl" style="width:360px">
       <canvas class="chart chart-bar"  chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent"  ></canvas>
  </div>
 </body>
</html>

在页面脚本中使用AngularJS $ scope var

1 个答案: