Question

我正在尝试从html文本字段传递图表行数据。

由于某种原因，我无法将模型链接到控制器SecondCtrl。

以下代码是对来自http://plnkr.co/edit/3RJ2HS?p=preview

的https://github.com/angular-google-chart/angular-google-chart的改编

这是我的代码：

的index.html：

<html>
<head>
    <title>
        Google Chart Tools AngularJS Directive Example
    </title>
</head>
<body ng-app="google-chart-example">
<h1>Google Chart Tools AngularJS Directive Example</h1>
<p>This is probably the most simple example you can get.  It
  just shows you what you need to get the Google Chart Tools AngularJS Directive to work.
</p>

<div ng-controller="MainCtrl">
<div google-chart chart="chart" style="{{chart.cssStyle}}"/>
</div>

<div ng-controller="SecondCtrl">
<input type="text" name="chart-rows" id="chart-rows" value='[{"c":[{"v":"January"},{"v":19,"f":"42 items"},{"v":12,"f":"Ony 12 items"},{"v":7,"f":"7 servers"},{"v":4}]},{"c":[{"v":"February"},{"v":13},{"v":1,"f":"1 unit (Out of stock this month)"},{"v":12},{"v":2}]},{"c":[{"v":"March"},{"v":24},{"v":0},{"v":11},{"v":6}]}]' ng-model="chartrows"/>
<div google-chart chart="chart" style="{{chart.cssStyle}}"/>
</div>
<p>
  <pre>{{chart.data.rows}}</pre>
</p>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html></body>
</html>

example.js：

'use strict';

angular.module('google-chart-example', ['googlechart'])
.controller("MainCtrl", function ($scope) {

    var chart1 = {};
    chart1.type = "LineChart";
    chart1.cssStyle = "height:200px; width:300px;";
    chart1.data = {"cols": [
        {id: "month", label: "Month", type: "string"},
        {id: "laptop-id", label: "Laptop", type: "number"},
        {id: "desktop-id", label: "Desktop", type: "number"},
        {id: "server-id", label: "Server", type: "number"},
        {id: "cost-id", label: "Shipping", type: "number"}
    ], "rows": [
        {c: [
            {v: "January"},
            {v: 19, f: "42 items"},
            {v: 12, f: "Ony 12 items"},
            {v: 7, f: "7 servers"},
            {v: 4}
        ]},
        {c: [
            {v: "February"},
            {v: 13},
            {v: 1, f: "1 unit (Out of stock this month)"},
            {v: 12},
            {v: 2}
        ]},
        {c: [
            {v: "March"},
            {v: 24},
            {v: 0},
            {v: 11},
            {v: 6}

        ]}
    ]};

    chart1.options = {
        "title": "Sales per month",
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit", "gridlines": {"count": 6}
        },
        "hAxis": {
            "title": "Date"
        }
    };

    chart1.formatters = {};

    $scope.chart = chart1;

})
.controller("SecondCtrl", function ($scope) {

    var chart1 = {};
    chart1.type = "ColumnChart";
    chart1.cssStyle = "height:200px; width:300px;";
    chart1.data = {
        "cols": [
            {id: "month", label: "Month", type: "string"},
            {id: "laptop-id", label: "Laptop2", type: "number"},
            {id: "desktop-id", label: "Desktop2", type: "number"},
            {id: "server-id", label: "Server2", type: "number"},
            {id: "cost-id", label: "Shipping2", type: "number"}
        ]
    };
    chart1.data.rows = $scope.chartrows;

    chart1.options = {
        "title": "Sales per month",
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit", "gridlines": {"count": 6}
        },
        "hAxis": {
            "title": "Date"
        }
    };

    chart1.formatters = {};

    $scope.chart = chart1;
});

这是我创建的一个plunker： https://embed.plnkr.co/7EVbT0oMUbl74L2ITU66/

由于

Answer 1

- UPDATE -

建议：为图表行捕获input的方式可能不是一个好习惯。您可能需要重新考虑这一点，可能需要添加一个小form来创建这些元素，并push将它们添加到$scope.chartrows。

value字段中的input没有正确构建object，您可能会检查来源。

//Not well formed object
["c" : [{
            "v" : "january"
        }, {
            "v" : 19,
            "f" : "42=" " items" //<-- NO NO
        }, {
            "v" : 12,
            "f" : "ony=" " 12=" " items" //<-- NO NO
        }, {
            "v" : 7,
            "f" : "7=" " servers" //<-- NO NO
        }, {
            "v" : 4
        }
    ]];
// Try this
 [{"c":[{"v":"january"},{"v":19,"f":"42 items"},{"v":12,"f":"ony 12 items"},{"v":7,"f":"7 servers"},{"v":4}]}];

您想将input数据绑定到chart1.data.rows，然后执行此操作

  $scope.chartrows = [];//empty array or with data...
  chart1.data.rows = $scope.chartrows;

SecondCtrl

         .controller("SecondCtrl", function ($scope) {

        var chart1 = {};
        chart1.type = "ColumnChart";
        chart1.cssStyle = "height:200px; width:300px;";
        chart1.data = {
            "cols" : [{
                    id : "month",
                    label : "Month",
                    type : "string"
                }, {
                    id : "laptop-id",
                    label : "Laptop2",
                    type : "number"
                }, {
                    id : "desktop-id",
                    label : "Desktop2",
                    type : "number"
                }, {
                    id : "server-id",
                    label : "Server2",
                    type : "number"
                }, {
                    id : "cost-id",
                    label : "Shipping2",
                    type : "number"
                }
            ]
        };
        //#CHANGE START
        $scope.chartrows = [{"c":[{"v":"january"},{"v":19,"f":"42 items"},{"v":12,"f":"ony 12 items"},{"v":7,"f":"7 servers"},{"v":4}]}]; 
        chart1.data.rows = $scope.chartrows;
        // CHANGE END
        chart1.options = {
            "title" : "Sales per month",
            "isStacked" : "true",
            "fill" : 20,
            "displayExactValues" : true,
            "vAxis" : {
                "title" : "Sales unit",
                "gridlines" : {
                    "count" : 6
                }
            },
            "hAxis" : {
                "title" : "Date"
            }
        };

        chart1.formatters = {};

        $scope.chart = chart1;
    });

HTML

 <input type="text" name="chart-rows" id="chart-rows" value="" ng-model="chartrows" />

不确定为什么或如何期望使用它，但我认为您需要更新此行。

   chart1.data.rows = $scope.chartrows;//remove this line
   ...
   chart1.data.rows = [] //empty array.

   // this is where you tell angular chartrows is the model and it's binding to chart1.data.rows.

   $scope.chartrows = chart1.data.rows; //add this just above the line below
   //at this point you have chart1 with all your options
   $scope.chart = chart1;// you already have this.

告诉我们。

使用来自后端的数据与angular-google-chart而不使用ajax

1 个答案: