Question

我目前正在使用Ionic Framework和AngularChart开发一个数据驱动的应用程序，我现在已经达到了主要设计UI的阶段，现在我需要开始考虑如何显示数据。用户看。显然，我决定使用AngularChart，因为我有使用Chart.js和Angular的经验，所以它真的很有意义！

我已经在沙箱环境中定义了几个静态图表，没有任何问题，但理想情况下我会设置画布类来根据JSON数组中的值来定义图表类型。数据来自（见下文）

前面提到的JSON数组如下：

[
    {
        "name": "Fitness",
        "chart_type": "chart chart-line"
    },
    {
        "name": "Performance",
        "chart_type": "chart chart-line"
    },
    {
        "name": "Weightlifting",
        "chart_type": "chart chart-line"
    },
    {
        "name": "Anthropometrics",
        "chart_type": "chart chart-line"
    },
    {
        "name": "Sport specific test",
        "chart_type": "chart chart-line"
    },
    {
        "name": "Sport lab test",
        "chart_type": "chart chart-line"
    } 
]

从菜单中选择其中一个数组元素，并将其存储在控制器的$scope.metric中，可以在下一个屏幕（下面的代码）中访问它们，这样数据就可以以正确的图表格式显示。显然他们目前都是一样的，但是当我进一步深入项目时，他们会有所不同，所以我想尝试动态地做。

应该显示图表的视图的代码如下：

<ion-view>
  <div class="bar bar-header bar-stable">
    <button class="button button-stable button-outline" ng-click="go('home')">
      <i class="icon ion-ios-home"></i>
    </button>
    <h1 class="title">{{ metric.name }}</h1>
    <button class="button button-stable button-outline" ng-click="logOut()">
      Log out
    </button>
  </div>
  <ion-content>
    <h2>{{ metric.name }} scores</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <br/>
      <br/>
    </p>
    <canvas id="line" class="{{metric.chart_type}}" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
  </ion-content>
</ion-view>

我知道度量对象正在正确存储，因为{{metric.name}}部分正在显示正确的内容，如果我在画布上检查应该呈现图表的元素，我可以看到该类是正确的好吧，但是图表没有呈现，如下面的屏幕截图所示。

我不确定我在哪里出错，所以任何帮助都会非常感激。

编辑 - 添加了相关控制器

angular.module('app')
  .controller('metric_ctrl', function($scope, $state, user_svc, metric_svc, $ionicHistory) {

    $scope.metricOptions = [{
      "name": "Fitness",
      "chart_type": "chart chart-line"
    }, {
      "name": "Performance",
      "chart_type": "chart chart-line"
    }, {
      "name": "Weightlifting",
      "chart_type": "chart chart-line"
    }, {
      "name": "Anthropometrics",
      "chart_type": "chart chart-line"
    }, {
      "name": "Sport specific test",
      "chart_type": "chart chart-line"
    }, {
      "name": "Sport lab test",
      "chart_type": "chart chart-line"
    }];
    $scope.scores = metric_svc.getScores();
    $scope.metric = metric_svc.getMetric();

    // console.log($scope.metric.chart_type);


    $scope.labels = ['T1', 'T2', 'T3', 'T4'];
    $scope.series = ["Weight (Kg)", "BMI (%)"];
    $scope.data = [
      [64, 67, 70, 73],
      [17.3, 18.4, 19.2, 20.1]
    ];
    $scope.options = {
      scales: {
        yAxes: [{
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left',
          scaleLabel: {
            display: true,
            labelString: "Weight (Kg)"
          }
        }, {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right',
          scaleLabel: {
            display: true,
            labelString: "BMI (%)"
          }
        }]
      }
    };
    $scope.datasetOverride = [{
      yAxisID: 'y-axis-1'
    }, {
      yAxisID: 'y-axis-2'
    }];


    $scope.logOut = function() {
      $scope.user = {};
      user_svc.setUser($scope.user);
      $state.go('login');
    };

    $scope.setMetric = function(metric) {
      // console.log('Setting metric to ' + metric);
      $scope.metric = metric;
      metric_svc.setMetric(metric);
      $state.go('metrics_value')
    }

    $scope.getScores = function() {
      $scope.scores = metric_svc.getScores();
      // console.log($scope.scores);
    }

  })

Answer 1

因此，经过大量的挫折之后，我试图弄清楚为什么范围变量没有改变我想要的DOM，我回到了AngularChartJS文档，发现了一个非常简单的解决方案。

如果将画布的类设置为chart chart-base，则可以通过简单地为画布提供chart-type属性并将其设置为任何作用域变量来设置图表类型叫做。就我而言，这是我最终得到的标记，以达到我需要的结果，当然，chart_type是控制器中保存的变量。

<canvas class="chart chart-base" chart-type="chart_type" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>

使用Angular Chart动态设置图表类型？

1 个答案: