Javascript 使用下拉菜单选择并显示一个图表

我有两个图表，我想用下拉菜单显示。但是我尝试了这两种方法（使用JQuery/AngularJS），但是我很难做到这一点

我有两张图表

<div  ng-controller="ExampleCtrl">
    <nvd3-discrete-bar-chart
            data="exampleData"
            id="exampleId"
            width="800"
            height="400"
            tooltips="true"
            showXAxis="true"
            showYAxis="true">
        <svg></svg>
    </nvd3-discrete-bar-chart>

    <nvd3-discrete-bar-chart
            data="exampleData2"
            id="exampleId2"
            width="800"
            height="400"
            tooltips="true"
            showXAxis="true"
            showYAxis="true">
        <svg></svg>
    </nvd3-discrete-bar-chart>    
</div>

使用Jquery：

---

我认为您使用Angular

ng选项选择菜单的想法很好，因为您在纯javascript中穿插Angular的方式似乎并不是解决问题的特别“Angular”方式。例如，在使用
onclick
的地方，我建议使用Angular的
ng change
并将
选择
放在控制器内

下面是一个例子，主要基于您的原始文档，并使用更多角度的方法来解决此问题：

HTML
值得一读Scott Allen关于使用ngOptions的帖子。

关于初始化选择值，请参阅此stackoverflow帖子：

撇开主要问题不谈，你的小提琴有很多错误。为什么图形有两个ID？取下一个，保留另一个。使用onclick代替对select标记使用onchange。您需要使用selectedIndex而不是value。根据您的注释，在这种情况下如何选择图表（或者如何插入数据源？）；检查更新或者我应该开始考虑使用Angular JS下拉菜单吗？太好了！谢谢你的帮助
<select id="leave" onchange="leaveChange()">
  <option value="1">Second</option>
  <option value="2">First</option>

</select>

function leaveChange() {
    if (document.getElementById("leave").value != "1"){
 document.getElementById("test").data="exampleData2";
    }     
    else{
        document.getElementById("test").data="exampleData";
    }        
}

<div ng-app='nvd3TestApp'>
    <div ng-controller="ExampleCtrl">
        <select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart" ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
        <nvd3-discrete-bar-chart data="exampleData" id="exampleId" width="800" height="400" tooltips="true" showXAxis="true" showYAxis="true">
            <svg></svg>
        </nvd3-discrete-bar-chart>
    </div>
</div>

angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

function ExampleCtrl($scope) {
    $scope.chartOptions = [{
        id: 1,
        name: "Option 1"
    }, {
        id: 2,
        name: "Option 2"
    }];

    var d1 = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }];

    var d2 = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }, {
        key: "Cumulative Return2",
        values: [
            ["A", 10.765957771107],
            ["B", 0],
            ["C", -32.807804682612],
            ["D", 96.45946739256],
            ["E", 0.19434030906893],
            ["F", -38.079782601442],
            ["G", -43.925743130903],
            ["H", -3.1387322875705]
        ]
    }];

    $scope.updateChart = function () {
        if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
            $scope.exampleData = d1;
        }
        if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
            $scope.exampleData = d2;
        }
    };

    $scope.$on('tooltipShow.directive', function (event) {
        //console.log('scope.tooltipShow', event);
    });

    $scope.$on('tooltipHide.directive', function (event) {
        //console.log('scope.tooltipHide', event);
    });

}