Question

所以我试图用我的angularJS控制器中的数据生成一个图形。该图形库使用jquery。

jquery.sparkline documentation

据我所知，这里有两种输入数据的方法。

<elem class="sparkline-class">1,2,3,4,5,6,7</elem>
var passedData = [1,4,5,5,6,3,2]; $(".sparkline-big-passedData").sparkline(passedData, {

我真正想要的是

<elem class="sparkline-class">{{$ctrl.myControllerVariable}}</elem>

上面理想的示例 3 等同于上面的 1 示例。

我想将数组从控制器传递到jquery中，如示例 2 一样，或者使其像示例 1 一样内联文本（两者均无效） atm）？

由于某种原因，我无法使控制器吐出的数据例如。 {{$ctrl.waterPressure}}工作。

这是我的代码，我设置了3个示例：

控制器：

export class MachinePark implements OnInit{
    processTemperature:number[] = [7,9,14,7,4,5,12,6,9,4,12,13,14];
    waterPressure:number[] = [2.2,2.4,2.6,2.7,2.1,2.6,2.1,2.8,1.1,2.6,2.3,2.2,2.2];
...
}

摘要：

var passedData = [7, 4, 3, 5, 5, 6, 2, 5];

$(function() {
    "use strict";
    $(".sparkline-big-processTemperature").sparkline("html", { //documentation sais, i can use a variable here, or opt for inline-html
      type: "line",
      width: "100%",
      height: "80",
      highlightLineColor: "#ffffff",
      lineColor: "#ffffff",
      fillColor: "transparent",
      lineWidth: 1,
      spotColor: "#ffffff",
      minSpotColor: "#ffffff",
      maxSpotColor: "#ffffff",
      highlightSpotColor: "#000000",
      spotRadius: 4
    })
  }),
  $(function() {
    "use strict";
    $(".sparkline-big-waterPressure").sparkline("html", { //this uses elem-inline data
      type: "line",
      width: "100%",
      height: "80",
      highlightLineColor: "#ffffff",
      lineColor: "#ffffff",
      fillColor: "transparent",
      lineWidth: 1,
      spotColor: "#ffffff",
      minSpotColor: "#ffffff",
      maxSpotColor: "#ffffff",
      highlightSpotColor: "#000000",
      spotRadius: 4
    })
  }),
  $(function() {
    "use strict";
    $(".sparkline-big-passedData").sparkline(passedData, { //this uses data passed from a variable
      type: "line",
      width: "100%",
      height: "80",
      highlightLineColor: "#ffffff",
      lineColor: "#ffffff",
      fillColor: "transparent",
      lineWidth: 1,
      spotColor: "#ffffff",
      minSpotColor: "#ffffff",
      maxSpotColor: "#ffffff",
      highlightSpotColor: "#000000",
      spotRadius: 4
    })
  });

.panel-box {
  min-width: 248px;
  display: table-cell;
  float: none!important;
  padding: 0!important;
  table-layout: fixed;
}

.panel-content {
  position: relative;
  padding: 20px;
  width: 400px;
  height: 120px;
  text-align: center;
}

.bg-black {
  color: #ccc;
  border-color: #000;
  background: #272634!important;
  vertical-align: top!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-box col-xs-8">
  <div class="panel-content bg-black">
    <div class="sparkline-big-waterPressure">{{$ctrl.waterPressure}}</div>
  </div>
</div>
<br>
<div class="panel-box col-xs-8">
  <div class="panel-content bg-black">
    <div class="sparkline-big-processTemperature">2,8,3,4,5,6,2,3,4</div>
  </div>
</div>
<br>
<div class="panel-box col-xs-8">
  <div class="panel-content bg-black">
    <div class="sparkline-big-passedData"><!-- PASSED DATA FROM JQUERY --></div>
  </div>
</div>

<script type="text/javascript" src="https://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>

是否可以 1。在jquery中访问我的angularJS控制器的值？ 2。。我可以以某种方式使它的控制器值作为内联数据工作吗？

从控制器获取数据并在jquery / javascript

0 个答案: