使用angularjs和json使用$ http在Flot Chart上绘制数据

Question

我使用angularjs，php和mysql创建了一个应用程序。我已经设置了一个RESTful API，它将mysql数据导出到json。我想知道如何绘制＆＃34; Copra_Mc＆＃34;使用以下JSON数据单独在flot折线图上显示数据。

  [
    {
    "productionhourlyNumber": "94",
    "Copra_Mc": "5.88741898",
    "Copra_Oil": "0.64851388"
    },
    {
    "productionhourlyNumber": "93",
    "Copra_Mc": "6.88741898",
    "Copra_Oil": ""
    },
    {
    "productionhourlyNumber": "92",
    "Copra_Mc": "5.89998",
    "Copra_Oil": ""
    }
]

HTML

<div class="tile-body" ng-controller="LineChartCtrl">
  <flot dataset="dataset" options="options" height="250px"></flot>
</div>

JS

我在控制器中设置了虚拟json，我想使用$ http而不是虚拟数据从上面的json中获取数据

    .controller('LineChartCtrl', function ($scope) {

    $scope.dataset = [{
      data: [[1,20.3],[2,5.9],[3,7.2],[4,8],[5,7],[6,6.5],[7,6.2],[8,6.7],[9,7.2],[10,7],[11,6.8],[12,7]],
      label: 'Copra_Mc',
      points: {
        show: true,
        radius: 6
      }
    }, {
      data: [[1,6.6],[2,7.4],[3,8.6],[4,9.4],[5,8.3],[6,7.9],[7,7.2],[8,7.7],[9,8.9],[10,8.4],[11,8],[12,8.3]],
      label: 'OEE',
      points: {
        show: true,
        radius: 6
      }
    }, {
      data: [[1,9.6],[2,7.4],[3,8.6],[4,13.4],[5,8.3],[6,7.9],[7,14.2],[8,7.7],[9,8.9],[10,8.4],[11,8],[12,8.3]],
      label: 'OVE',
      points: {
        show: true,
        radius: 6
      }
    }];
      }
    };
   })

图表看起来像这样

Answer 1

您需要使用流程图指令通过$ http

使用json

这里的angularjs中的flot chart下载指令

https://www.npmjs.com/package/angular-flot
https://github.com/ErikAugust/angularjs-flot-chart-directive

并使用与此相似的

http://www.codeandyou.com/2015/02/injecting-service-to-directives-in.html