Question

（对不起，如果我的英语出错）

我尝试使用库chart.js

显示图表

我将它包含在我的index.html中：

        <script type ="text/javascript" src="app/utils/Chart.js"></script>

然后，我在视图中调用了画布：

<!DOCTYPE xml>
<mvc:View controllerName="Metrology.controllers.Pentagone" xmlns="sap.m"
xmlns:layout="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">   
<html:canvas id="radarChart" width="800" height="650"></html:canvas>

然后，我在我的控制器的onBeforeRendering函数中创建图形：

onBeforeRendering : function () {

            //radar chart data
        var radarData = {
                labels : ["Performance","Security","Robustness","Changeability","Transferability",],
                datasets : [
                    {
                         fillColor: "rgba(102,45,145,.1)",
                        strokeColor: "rgba(102,45,145,1)",
                        pointColor : "rgba(220,220,220,1)",
                        pointStrokeColor : "#fff",
                        data : [70,70,70,70,70]
                    },
                    {
                        fillColor: "rgba(63,169,245,.1)",
                        strokeColor: "rgba(63,169,245,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        data : [70,70,70,70,70]
                    }
                ]
            }
            //Create Radar chart
            var pentagone = document.getElementById("radarChart").getContext("2d");
            var myNewChart = new Chart(pentagone).Radar(radarData);

            //new Chart(pentagone).Radar(radarData);
    }

这根本不起作用。我的控制台中没有出现任何错误，并且画布在我的应用程序中根本不显示。我们可以选择它，检查它，但它甚至不像灰色或其它东西，它只是看不见。

我尝试了几乎所有的东西，所以如果你能帮助我们，那就太好了！：）

最好的问候

Answer 1

代码中有两个错误：

您在事件挂钩onBeforeRendering中调用它，这没有任何意义，因为尚未呈现DOM，即永远不会找到ID为radarChart的元素。将代码移至事件挂钩onAfterReendering而不是
你的画布的id不会是radarChart，而是类似__xmlview1-radarchart（你可以在检查DOM时看到它。你的控制台中也会出现错误，可能是因为方法{{ 1}}无法解决）

更好地使用

getContext

相反，您可以正确引用画布

编辑：

使用您的代码查看此工作示例：

<core:HTML preferDOM="true" content="&lt;canvas id='radarChart' width='800' height='650'/&gt;" />

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
    },

    onAfterRendering : function() {
        var radarData = {
            labels : ["Performance","Security","Robustness","Changeability","Transferability",],
            datasets : [
                {
                     fillColor: "rgba(102,45,145,.1)",
                    strokeColor: "rgba(102,45,145,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [70,70,70,70,70]
                },
                {
                    fillColor: "rgba(63,169,245,.1)",
                    strokeColor: "rgba(63,169,245,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [70,70,70,70,70]
                }
            ]
        }
        //Create Radar chart
        var pentagone = document.getElementById("radarChart").getContext("2d");
        var myNewChart = new Chart(pentagone, {
            type: "radar",
            data: radarData
        });
    }

});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

Answer 2

感谢您的回答。

我把所有东西放在onAfterRendering

上

但我的观点最让人接受

“元素”core：html“的前缀”core“没有绑定。”

我很抱歉我不知道这个“DOM”的东西是什么，我是一个实习生，我真的没有在SAPUI5，甚至在Web上进行实验

Canvas doens在SAPUI5中显示

2 个答案:

编辑：