文章/答案/技术大牛

发布

社区首页 >问答首页 >在没有ajax的情况下，通过angular-google-chart使用后端数据

问在没有ajax的情况下，通过angular-google-chart使用后端数据
EN

Stack Overflow用户

提问于 2016-10-28 04:49:48

回答 1查看 541关注 0票数 0

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

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

下面的代码改编自https://github.com/angular-google-chart/angular-google-chart中的http://plnkr.co/edit/3RJ2HS?p=preview

下面是我的代码：

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;
});

这是我创建的柱塞：https://embed.plnkr.co/7EVbT0oMUbl74L2ITU66/

谢谢

angularjs

回答 1

Stack Overflow用户

发布于 2016-10-28 09:53:28

-更新--

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

value in the input字段中的object格式不正确，您可能需要检查源代码。

//格式不正确的对象["c“：{ "v”：“一月”}，{ "v“：19，"f”："42=“”items“//<-- NO NO }，{ "v”：12，"f“："ony=”“12=”“items”//<-- NO NO }，{ "v“：7，"f”："7=“”12=“//<-- NO NO }，{ "v”：4} ]；//试试这个[{“c”：{“v”：“一月”}，{"v":19，"f":"42个项目“}，{"v": 12，”f“：”只有12个项目“}，{"v":7，"f":"7个服务器”}，{"v":4}}]；

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

$scope.chartrows =[]；//空数组或有数据...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.

让我们知道。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40293973

复制

相似问题

问在没有ajax的情况下，通过angular-google-chart使用后端数据
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在没有ajax的情况下，通过angular-google-chart使用后端数据EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在没有ajax的情况下，通过angular-google-chart使用后端数据
EN