Question

我想知道如何让我的垂直标签显示我在备用页面上创建的视觉效果。选项卡是样式化的，由于长度，CSS被省略。我的html文件是 test.html ，备用文件是 App.js 。当我单击选项卡时，我想显示在 App.js 中创建的视觉效果我已经测试了视觉效果以确保它们正常工作。但是当我点击标签时，没有任何显示。这就像点击没有附加任何内容的按钮一样。没有任何事情发生。

如何将视觉效果添加到标签中以使其显示？

test.html代码页面（我遗漏了我的CSS链接.CSCS可以对齐）：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body ng-App="App">
    <div id="container" style="padding-top: 20px" ng-controller="AppController">
    <div id="tab">
       <button class="tablink" onclick="show1()">Visual 1</button>
    </div>

    <div id="visual1" ng-show"display1">
       <script type="text/javascript" src="App.js"></script>
       <div id="testdash">
         <div id="filter1"></div>
         <div id="chart1"></div>
       </div>
    </div>
</body>
</html>

App.js页面：

var app = angular.module('App',);
 app.controller('AppController', function($scope, $http, $ace) {
       $scope.show1 = function() {
        if ($scope.display1 == false) {
            getCurrVis1();
            $scope.display1 = true;   }
        else {
            $scope.display1 = false;  }     
        }

    function getCurrVis1() { 
            var req = { method: 'POST',
                        url: "test.tsv" 
            }
            $http(req).success(function(js) {
                var data = js;
                drawChart1(data); 
            })
    }

    function drawChart1(data) {
        //creates data table
        var table = new google.visualization.DataTable();
        var data = data;
        console.log(data);
        var dataRows = data.split("\n");
        var headers = dataRows[0].split('\t');
        table.addColumn('string', headers[0]); 
        table.addColumn('number', headers[1]);
        table.addColumn('string', headers[2]);
        var rs = [];

        for (var x=1; x<(dataRows.length); x++) {
            var cols = dataRows[x].split('\t');
            var row = [];
            row.push(cols[0]);           
            row.push(parseInt(cols[1]));
            row.push(cols[2]);
            rs.push(row);
        }

        table.addRows(rs);

        // Create a dashboard to bind a filter to the chart
        var dashboard = new google.visualization.Dashboard(document.getElementById('testdash'));

        var filter1 = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'filter1',
            'options': {
                'filterColumnIndex': 0,
                'ui': { 
                    'label': 'Filter:',
                    'selectedValuesLayout': 'belowStacked',
                    'allowTyping': false,
                    'allowMultiple':true,}
            }
        });

        //Sets chart, and chart options
        var chart = new google.visualization.ChartWrapper({
                    'chartType': 'PieChart',
                    'containerId': 'chart1',
                    'options': { 'left': '25%',
                        'height': '80%',
                        'width': '80%' ,
                        'width':800,
                        'height':600,
                        'pieSliceText': 'value'},
                    'view': { 'columns': [0,1]}
        });

        dashboard.bind(filter1, chart);
        dashboard.draw(table);

    }
 }

Answer 1

我明白了！稍微更改 HTML 页面，我们很高兴！以下是工作示例的代码：

<html>
<body>   
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<div class="tab">
<button class="tablinks" onclick="functionname(event, 'DIVID') ng-click="show1()">TabName</button>
</div>

<div id="DIVID" class="tabcontent">
<h3>Content1</h3>
    <div id="panel1" ng-show="display5">   <!-- div id for panels and down...-->
        <script type="text/javascript" src="App.js"></script>
            <div id = "test.js">
                <div id = "filter1"></div>
                <div id = "chart1" align = "center"></div>
            </div>
    </div>
</div>


<script>

function functionname(value1, value2) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(value2).style.display = "block";
    value1.currentTarget.className += " active";
}
</script>

</body>
</html>

创建垂直选项卡从外部JS

1 个答案: