отправить значения из углового JS в элемент холста, используя JavaScript - PullRequest
Новая
       0

отправить значения из углового JS в элемент холста, используя JavaScript

0 голосов
/ 24 октября 2018

в моей угловой JS-области, у меня есть объект с ключевыми значениями 

result = {"2018-10-15": "62.89",
"2018-10-16": "62.50",
"2018-10-17": "63.20",
"2018-10-18": "63.51",
"2018-10-19": "63.04",
"2018-10-20": "62.81",
"2018-10-21": "63.59",
"2018-10-22": "64.75",
"2018-10-23": "62.81"}

$scope.keys = Object.keys(result);
$scope.values = Object.values(result);

У меня есть этот элемент холста на моей html-странице для создания гистограммы 

<canvas id="myChart" width="400" height="400" ></canvas>

Я пытался получить доступ к значениям и ключам в JavaScript, используя

var labels = angular.element(document.querySelector('[ng-controller="masterController"]')).scope().keys, var data = angular.element(document.querySelector('[ng-controller="masterController"]')).scope().value,

Но это не работает.

1 Ответ

0 голосов
/ 24 октября 2018

Вы должны добавить угловой модуль и контроллер, чтобы использовать переменные $ scope.Приведенный ниже код дает решение вашей проблемы: 

<html ng-app="myApp" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="bar-chart" width="800" height="450"></canvas>


<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
var result = {"2018-10-15": 62.89,
"2018-10-16": 62.50,
"2018-10-17": 63.20,
"2018-10-18": 63.51,
"2018-10-19": 63.04,
"2018-10-20": 62.81,
"2018-10-21": 63.59,
"2018-10-22": 64.75,
"2018-10-23": 62.81}

$scope.keys = (Object.keys(result));
$scope.values = (Object.values(result));
//console.log(keys,values);

new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
  labels: $scope.keys,
  datasets: [
    {
      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3498DB","#DB6C34","#FAF00C","#49FA0C"],
      data: $scope.values
    }
  ]
},
options: {
    scales: {
    yAxes: [{
        stacked: true,
           ticks: {
              min: 0,
              stepSize: 20,
          }
    }]
},
  legend: { display: false },
  title: {
    display: true,
  }
}
});
});

</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...