Javascript 需要帮助将Chart.js Chart添加到模式窗口（我正在使用AngularJS）

我对大多数与web开发相关的事情都不熟悉。在过去的几周里，我一直在使用AngularJS构建一个原型网站。 由于我对angular如何工作的理解有缺陷，我重定向到某些网页，因此破坏了应用程序；当时，这并不重要，因为这只是一个快速的原型，可以让一些想法下来。 然而，现在我想构建一些更真实的东西，因此应用程序必须在一个页面上运行。 我决定实现modals来显示应用程序中的数据，而不是在原始原型中使用重定向。 到目前为止，一切进展顺利，我可以单击列表中的一个项目，打开一个模式窗口，显示与所选项目相关的正确数据，除了图形

我不确定应该如何在模型中实现图形，或者更准确地说，不确定如何选择canvas元素将图形添加到模型中

我使用templateURL作为模式，使用控制器处理模式功能

由于我对javascript的了解充其量是不可靠的，所以我今天大部分时间都在复习javascript和JQuery的基础知识，这两个星期来我一直在使用Angular

在静态页面上，我使用Chart.js文档中描述的图表

<script>
                        var data = {
                            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                            datasets: [
                                {
                                    label: "My First dataset",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: [65, 59, 80, 81, 56, 55, 40, 80, 81, 56, 55, 40]
                                },
                                {
                                    label: "My Second dataset",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: [28, 48, 40, 19, 86, 27, 90, 86, 27, 90, 90, 2]
                                }
                            ]

                        }
                        var ctx = document.getElementById("myChart").getContext("2d");
                        var options = {responsive: true};
                        var myNewChart = new Chart(ctx).Line(data, options); 
</script>

我是否可以在模态控制器中添加图表和数据？或者使用指令？ 最终，当用户选择打开模式窗口的项目时，图形将显示从数据库查询的数据

我一直在考虑使用javascript和JQuery添加图表和数据，但它们要求在执行时页面上的元素可用，而这里的情况并非如此。我已经尝试将javascript添加到templateURL，但也不起作用。

---

还有，我想我应该能够以角度的方式来做这件事，有人能建议这是怎么可能的吗

根据我的回答，我假设模态是正确打开的

我们需要2个控制器： 按住$modal服务并控制打开modal，我们将使用您的重命名 应用程序控制器'myCtrl'，函数$scope，$modal{ $scope.open=功能设备{ $scope.device=设备； var modalInstance=$modal.open{ templateUrl:'add_modal.html'， 控制器：“myCtrl” windowClass:“应用程序模式窗口”， }; modalInstance.result.then函数{ 日志“你可以在这里检查用户选择”； }，功能{ console.log“模式解除时间：”+新日期； }; };

---

}; 为这个图表创建一个指令将符合您的最佳利益，这样您也可以在任何您喜欢的地方使用它

---

我做了类似的事情。

嗨，本，谢谢你的帮助。我现在可以在模式中访问图表数据，但图表仍然无法绘制。我已经尝试按照您的建议添加myData和MyLabel，包括和排除格式设置，如我的原始问题所示，虽然数据显示在模式窗口的结果html中，但没有绘制图表。我是否需要以某种方式显式地包含chart.js？或者打电话重画？就我所知，模态窗口显示正确，所有元素都在那里，但图表没有绘制到画布上。我可以声明一个函数来选择画布并在模态在modalCtrl控制器中打开后对其进行操作吗？是的，很抱歉没有提到-var app=angular.module'myApp'，['chart.js']添加charts.js sourcesThanks感谢你们的帮助，在经历了很多混乱之后，我似乎有一个更深层次的问题，我的应用程序不会接受chart.js作为依赖项。但我设法用角度图来代替。

<div id="deviceModal">
    <div class="modal-header">
        <div class="divBar" >
            <div class="{{device.status}}"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}"> </div>
            <div class="title">
                <h3>{{device.id}}</h3><br />

            </div>
            <div class="{{device.status}}Text"><b>STATUS: {{device.status}}</b> - {{device.action}}</div>
        </div> 
        <div class="divBar">
            <table>
                <tr><td class="dataLabel">Location: </td><td class="dataContent">{{device.location}}</td></tr>
                <tr><td class="dataLabel">Running Time: </td><td class="dataContent">3 days</td></tr>
                <tr><td class="dataLabel">Number of Starts: </td><td class="dataContent">60</td></tr>
            </table>
        </div>
        <div class="divBar deviceStatistics">
            <canvas id="myChart" width="400" height="200"></canvas>
        </div>
    </div>
</div>

app.controller('modalController', function ($scope, $modal) {

    $scope.open = function (device) {
        $scope.device = device;
        var modalInstance = $modal.open({
            templateUrl: 'add_modal.html',
            windowClass: 'app-modal-window',
            scope: $scope
        });

        console.log('modal opened');

        modalInstance.result.then(function () {

            console.log('you can check user selections here');

        }, function () {

            console.log('Modal dismissed at: ' + new Date());

        });

    };
});