Question

所以我使用以下包装器（https://github.com/lgsilver/angles）在Angular中使用Chart.js.

请记住，此时所有内容都是模拟数据。

在我的HTML中，我有一个元素：

<canvas chart type="Line" options="options" data="showChart(selectedUser)" width="500" height="300"></canvas>

接受selectedUser并查询服务，返回数组并绘制图形。

在我的控制器中，我有一行从服务中检索数据

 $scope.chartData = chartData.returnedData($scope.competitionId); //Gets chart data for each user from server

当然还有showChart（）函数（我需要最大的帮助）。

$scope.showChart = function(user) {
        userId = user;
        for (var i = 0; i < $scope.chartData.length; i++) {
            //var chartData = $scope.chartData[i];
        };
    };

app.service("chartData", function() {

    this.returnedData = function(comp)  {
        return [{
            userId: 2,
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6]
            }],
        }];
    };
});

目前，我得到一个空白。要测试库是否正确加载等，如果我在控制器中有这个，它会正确绘制并显示图形。现在注意HTML中的data =“”元素。

<canvas chart type="Line" options="options" data="chartLine" width="500" height="300"></canvas>

$scope.chartLine = {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    datasets: [{
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "#e67e22",
        pointColor: "rgba(151,187,205,0)",
        pointStrokeColor: "#e67e22",
        data: [4, 3, 5, 4, 6]
    }, {
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "#f1c40f",
        pointColor: "rgba(151,187,205,0)",
        pointStrokeColor: "#f1c40f",
        data: [8, 3, 2, 5, 4]
    }, {
        fillColor: "rgba(197,187,102,0)",
        strokeColor: "#f1c40f",
        pointColor: "rgba(151,187,205,0)",
        pointStrokeColor: "#f1c40f",
        data: [8, 5, 1, 5, 4]
    }],
};

Answer 1

我的解决方案是采取更简单的路线。

我使chartData成为一个工厂，它存储了一个对象 - 每个userId都是关键。
在HTML中 - 我们只是执行查找，而不是需要循环和不必要的函数。

Answer 2

actApp.directive（＆＃39; graphDraw＆＃39;，[＆＃39;复合＆＃39;，＆＃39;组件＆＃39;，功能（复合，组件）{ 返回{ 限制：＆＃39; AE＆＃39;，替换：true，模板：＆＃34;＆＃34;，

    link: function ($scope, $element, $attrs) {
        //Add the element to the main components collection
        $scope.components.push($element);

        //[$scope.model.data[0]
        //[$scope.model.question[2]         
        var xAxisArr = ($scope.model.data[2]).split(",");
        var yAxisArr = ($scope.model.data[3]).split(",");
        var xGap = 70/xAxisArr.length;
        var yGap = 80/yAxisArr.length;
        var lableXY = "";

        //string to form svg.
        svgStr = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->';
        svgStr += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
        svgStr += '<svg version="1.1" id="graphDraw" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox = "0 0 90 100" enable-background="new 0 0 90 100" xml:space="preserve">';

        //draw Axis X and Y
        svgStr += '<line x1="10" y1="1" x2="10" y2="92" fill="#000000" stroke="#000000" stroke-width="0.3" stroke-miterlimit="0"/>';
        svgStr += '<line x1="8" y1="90" x2="89" y2="90" fill="#000000" stroke="#000000" stroke-width="0.3" stroke-miterlimit="0"/>';
        svgStr += '<polyline stroke-linejoin="miter" points="8.5,3.5 10,1 11.5,3.5" stroke="#000" stroke-miterlimit:10; stroke-width="0.4" fill="none"/>'
         svgStr += '<polyline stroke-linejoin="miter" points="86.5,88.5 89,90 86.5,91.5" stroke="#000" stroke-miterlimit:10; stroke-width="0.4" fill="none"/>'

        //lable of X and Y axis
        lableXY += '<text id="labelTxt" class="labelTxtxy" style="left:18px; top:-10px;" fill="#000">'+$scope.model.question[5]+'</text>';
        lableXY += '<text id="labelTxt" class="labelTxtxy" style="left:445px; top:452px;" fill="#000">'+$scope.model.question[6]+'</text>';
        $element.append(component.getCompiledTag($scope, lableXY));

        //draw a graph Grid and assign lable
        for(var i = 1; i < parseInt(xAxisArr.length) + 1; i++)
        {
            svgStr += '<line x1="'+(10+i*xGap)+'" y1="10" x2="'+(10+i*xGap)+'" y2="90" fill="#999999" stroke="#999999" stroke-width="0.2" stroke-miterlimit="0"/>';
            svgStr += '<line x1="'+(10+i*xGap)+'" y1="88" x2="'+(10+i*xGap)+'" y2="92" fill="#000" stroke="#000" stroke-width="0.2" stroke-miterlimit="0"/>';
            svgStr += '<text id="labelTxt" class="labelTxtx" x="'+(10+i*xGap)+'px" y="95px" fill="#000">'+xAxisArr[i - 1]+'</text>';
        }
        for(var i = 0; i < parseInt(yAxisArr.length); i++)
        {
            svgStr += '<line x1="10" y1="'+(10+i*yGap)+'" x2="80" y2="'+(10+i*yGap)+'" fill="#999999" stroke="#999999" stroke-width="0.2" stroke-miterlimit="0"/>';
            svgStr += '<line x1="8" y1="'+(10+i*yGap)+'" x2="12" y2="'+(10+i*yGap)+'" fill="#000" stroke="#000" stroke-width="0.2" stroke-miterlimit="0"/>';
            svgStr += '<text id="labelTxt" class="labelTxty" x="6px" y="'+(10+i*yGap)+'px" fill="#000">'+yAxisArr[yAxisArr.length - i - 1]+'</text>';
        }

        svgStr += plotCurve(); 
        svgStr += '</svg>';
        $element.append(svgStr);

        //function used to draw curve using initial, control, and final points
        function plotCurve() {
            // Now figure out how big each slice of pie is. Angles in radians.
            var intersectPtArr = ($scope.model.data[4]).split(",");
            var xInit = 10 - xGap*$scope.model.data[1]/$scope.model.data[0];
            var yInit = 90 //- yGap *$scope.model.data[1];
            var xFinal = 10 + $scope.model.data[0]*xGap;
            var yFinal = 90;
            var xCtrl = 10 + $scope.model.data[5]*xGap;
            var yCtrl = 90 - yGap*(intersectPtArr[$scope.model.data[5]])*2;

            // This string holds the path details
                var d = "M " + xInit + "," + yInit +  // Start at initial point
                    " Q " + xCtrl + "," + yCtrl +     // curve control point
                    "  " + xFinal + "," + yFinal   // end at Final point
                //mask curve so show only requred curve                 
            var maskL = '<defs><mask id="mask1" x="0" y="0" width="100" height="100" ><rect x="10" y="0" width="80" height="100" stroke="none" fill="#ffffff"/></mask></defs>'
                // Now set attributes on the <svg:path> element
            var path = maskL + '<path d="'+d+'" fill="none" stroke="#000" stroke-width="0.3" mask=url(#mask1)/>';
            return path;
        }

        component.position($scope, $element, $attrs);
        component.size($scope, $element, $attrs);
    }
}

}]）;

在AngularJS和Chart.js中绘制图形

2 个答案: