Question

我的WebApp根据存储在.cvs文件中的数据显示雷达。相反，我想从mysql表中获取数据。

以下是选择.csv文件作为数据源的HTML / PHP代码：

<body class="container" ng-controller="MainCtrl as radar">   
    <!-- START VIZ-->
    <div class="visualization col-xs-7">
    <p>Select other sources:
    <select ng-options="example for example in radar.examples" ng-model="radar.exampleSelected" ng-change="radar.selectExample(radar.exampleSelected)"></select>
    </p>
    <div class="visualization">
    <radar csv="radar.csv" config="radar.config"></radar>
    </div>
    </div>
    <!-- END OF VIZ-->
</body>

HTML / PHP文件最后调用这些文件：

 <!-- scripts -->
      <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
      <script src="https://d3js.org/d3.v3.min.js"></script>
      <script src="app.js"></script>
      <script src="radar.js"></script>
      <script src="radarDraw.js"></script>
      <script>
<!-- end scripts -->

以下是名为＆＃39; app.js＆＃39;：

的文件内容

(function() {
  angular.module("RadarChart", [])
    .directive("radar", radar)
    .directive("onReadFile", onReadFile)
    .controller("MainCtrl", MainCtrl);

  // controller function MainCtrl
  function MainCtrl($http) {
    var ctrl = this;
    init();


    // function init
    function init() {
      // initialize controller variables
      ctrl.examples = [
         "radar-data.csv",
         "data_plant_seasons.csv",
        "data_car_ratings.csv"
      ];
      ctrl.exampleSelected = ctrl.examples[0];
      ctrl.getData = getData;
      ctrl.selectExample = selectExample;

      // initialize controller functions
      ctrl.selectExample(ctrl.exampleSelected);
      ctrl.config = {
        w: 300,
        h: 300,
        facet: false,
        levels: 5,
        levelScale: 0.85,
        [ETC...]
      };
    }

    // function getData
    function getData($fileContent) {
      ctrl.csv = $fileContent;
    }

    // function selectExample
    function selectExample(item) {
      var file = item ; //+ ".csv";
      $http.get(file).success(function(data) {
        ctrl.csv = data;
      });
    }
  }

  // directive function sunburst
  function radar() {
    return {
      restrict: "E",
      scope: {
        csv: "=",
        config: "="
      },
      link: radarDraw
    };
  }


  // directive function onReadFile
  function onReadFile($parse) {
    return {
      restrict: "A",
      scope: false,
      link: function(scope, element, attrs) {
        var fn = $parse(attrs.onReadFile);
        element.on("change", function(onChangeEvent) {
          var reader = new FileReader();
          reader.onload = function(onLoadEvent) {
            scope.$apply(function() {
              fn(scope, {
                $fileContent: onLoadEvent.target.result
              });
            });
          };
          reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
        });
      }
    };
  }
})();

感谢您的帮助。

从MYSQL表中检索数据而不是带有角度＆＃39;选择＆＃39;的.csv文件。

0 个答案: