创建垂直选项卡从外部加载视觉JS

我想知道如何让我的垂直选项卡显示我在备用页面上创建的视觉效果。选项卡是样式的，并且因为长度而省略了CSS。我的html文件是test.html，备用文件是App.js。当我点击选项卡时，我想要显示在App.js中创建的视觉效果我已经测试了视觉效果以确保它们可以正常工作。但是当我点击标签时，什么也没有显示。这就像点击一个没有附加任何东西的按钮。什么都没发生。创建垂直选项卡从外部加载视觉JS

如何将视觉效果添加到选项卡中以使其显示？

的test.html页面的代码（我离开了我的CSS链接CSS工程对齐。）：

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

    } 
}

来源

2017-07-27 Travis

我想通了！稍微更改为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>

来源

2017-07-27 19:30:40 Travis

创建垂直选项卡从外部加载视觉JS

回答

相关问题