Nvd3 图表未使用下拉按钮更新

Nvd3 charts not getting updated using dropdown button

我创建了一个包含 6 种不同过滤器类型的多条水平图：

  1. 每月
  2. 客户
  3. 供应商
  4. 行业细分
  5. 客户类型
  6. 销售工程师

但是，单击按钮后，上述过滤器类型的图表不会更新。

请发表您的看法。

代码如下：

<!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8">
                <title>NVD3 Example</title>
                <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
                <style>
                    .tick line {
                        display: none;
                    }

                    svg {
                        border-style: groove;
                        border-color: #999999;

                    }


                </style>
            </head>
            <body>
            <div ng-app="myApp" ng-controller="myCtrl">
                <select ng-model="graphType">
                    <option value="Monthly" label="Monthly" selected="selected">Monthly</option>
                    <option value="Customer">Customer</option>
                    <option value="Vendor">Vendor</option>
                    <option value="IndustrySegment">Industry Segment</option>
                    <option value="SalesEngineer">Sales Engineer</option>
                    <option value="CustomerType">Customer Type</option>
                </select>
                <button type="button" ng-click="changeData(graphType)">Change Graph Data</button>
                <button type="button" ng-click="refresh">Refresh</button>
                <section>
                    <nvd3 options="options" data="data"></nvd3>
                </section>
            </div>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
            <script type="text/javascript" src="./angular-nvd3.min.js"></script>
            <script type="text/javascript">

                var app = angular.module('myApp', ['nvd3']);
                app.controller('myCtrl', function ($scope) {

                    $scope.customerData = [
                        {
                            "key": "No. of Orders",
                            "color": "#d62728",
                            "values": [
                                {
                                    "label": "IC Pro",
                                    "value": -22
                                },
                                {
                                    "label": "Ilogicon",
                                    "value": -54
                                },
                                {
                                    "label": "Web India",
                                    "value": -5
                                }
                            ]
                        },
                        {
                            "key": "Revenue Generated",
                            "color": "#1f77b4",
                            "values": [
                                {
                                    "label": "IC Pro",
                                    "value": 47

                                },
                                {
                                    "label": "Ilogicon",
                                    "value": 53

                                },
                                {
                                    "label": "Web India",
                                    "value": 16

                                }
                            ]
                        }

                    ];
                    $scope.monthlyData = [
                        {
                            "key": "No. of Orders",
                            "color": "#d62728",
                            "values": [
                                {
                                    "label": "January",
                                    "value": -25
                                },
                                {
                                    "label": "February",
                                    "value": -43
                                },
                                {
                                    "label": "March",
                                    "value": -62
                                }
                            ]
                        },
                        {
                            "key": "Revenue Generated",
                            "color": "#1f77b4",
                            "values": [
                                {
                                    "label": "January",
                                    "value": 471

                                },
                                {
                                    "label": "February",
                                    "value": 987

                                },
                                {
                                    "label": "March",
                                    "value": 916

                                }
                            ]
                        }
                    ];
                    $scope.vendorData = [
                        {
                            "key": "No. of Orders",
                            "color": "#d62728",
                            "values": [
                                {
                                    "label": "Rockwell",
                                    "value": -22
                                },
                                {
                                    "label": "A",
                                    "value": -54
                                },
                                {
                                    "label": "B",
                                    "value": -5
                                }
                            ]
                        },
                        {
                            "key": "Revenue Generated",
                            "color": "#1f77b4",
                            "values": [
                                {
                                    "label": "Rockwell",
                                    "value": 47

                                },
                                {
                                    "label": "A",
                                    "value": 53

                                },
                                {
                                    "label": "B",
                                    "value": 16

                                }
                            ]
                        },


                    ];
                    $scope.industrySegmentData = [
                        {
                            "key": "No. of Orders",
                            "color": "#d62728",
                            "values": [
                                {
                                    "label": "Pharma",
                                    "value": -22
                                },
                                {
                                    "label": "Automotive",
                                    "value": -54
                                },
                                {
                                    "label": "Food",
                                    "value": -5
                                }
                            ]
                        },
                        {
                            "key": "Revenue Generated",
                            "color": "#1f77b4",
                            "values": [
                                {
                                    "label": "Pharma",
                                    "value": 47

                                },
                                {
                                    "label": "Automotive",
                                    "value": 53

                                },
                                {
                                    "label": "Food",
                                    "value": 16

                                }
                            ]
                        }

                    ];
                    $scope.salesEngineerData = [
                        {
                            "key": "No. of Orders",
                            "color": "#d62728",
                            "values": [
                                {
                                    "label": "Amar",
                                    "value": -22
                                },
                                {
                                    "label": "Akbar",
                                    "value": -54
                                },
                                {
                                    "label": "Anthony",
                                    "value": -5
                                }
                            ]
                        },
                        {
                            "key": "Revenue Generated",
                            "color": "#1f77b4",
                            "values": [
                                {
                                    "label": "Amar",
                                    "value": 47

                                },
                                {
                                    "label": "Akbar",
                                    "value": 53

                                },
                                {
                                    "label": "Anthony",
                                    "value": 16

                                }
                            ]
                        }

                    ];
                    $scope.customerTypeData = [
                        {
                            "key": "No. of Orders",
                            "color": "#d62728",
                            "values": [
                                {
                                    "label": "EC",
                                    "value": -22
                                },
                                {
                                    "label": "OEM",
                                    "value": -54
                                },
                                {
                                    "label": "DMC",
                                    "value": -5
                                }
                            ]
                        },
                        {
                            "key": "Revenue Generated",
                            "color": "#1f77b4",
                            "values": [
                                {
                                    "label": "EC",
                                    "value": 47

                                },
                                {
                                    "label": "OEM",
                                    "value": 53

                                },
                                {
                                    "label": "DMC",
                                    "value": 16

                                }
                            ]
                        }

                    ];
                    $scope.changeData = function (type) {
                        switch (type) {
                            case "Monthly":
                                $scope.data = [];
                                $scope.data = $scope.monthlyData;
                                break;
                            case "Customer":
                                $scope.data = [];
                                $scope.data = $scope.customerData;
                                break;
                            case "Vendor":
                                $scope.data = [];
                                $scope.data = $scope.vendorData;
                                break;
                            case "IndustrySegment":
                                $scope.data = [];
                                $scope.data = $scope.industrySegmentData;
                                break;
                            case "SalesEngineer":
                                $scope.data = [];
                                $scope.data = $scope.salesEngineerData;
                                break;
                            case "CustomerType":
                                $scope.data = [];
                                $scope.data = $scope.customerTypeData;
                                break;
                            default:
                                $scope.data = [];

                        }
                    };

                    $scope.options = {
                        chart: {
                            type: 'multiBarHorizontalChart',
                            height: 350,
                            x: function (d) {
                                return d.label;
                            },
                            y: function (d) {
                                return d.value;
                            },
                            //yErr: function(d){ return [-Math.abs(d.value * Math.random() * 0.3), Math.abs(d.value * Math.random() * 0.3)] },
                            showControls: false,
                            showValues: true,
                            duration: "500",
                            stacked: true,
                            grouped: false,
                            xAxis: {
                                showMaxMin: false
                            },

                            yAxis: {
                                axisLabel: 'Values',
                                tickFormat: function (d) {
                                    return d3.format(',f')(Math.abs(d));
                                }

                            },
                            valueFormat: d3.format(".0f"),
                            showYAxis: true,
                            showXAxis: false


                        }

                    };
                });
            </script>
            </body>
            </html>

使用以下内容：

<nvd3 options="options" data="data" config="{ refreshDataOnly: false }"></nvd3>

不确定是否是错误，但您可以跟踪问题 here。