Erstellen von vertikalen Registerkarten Laden von Visuals von außen JS

Ich frage mich, wie ich meine Vertical-Tabs dazu bringen kann, Visualisierungen anzuzeigen, die ich auf einer anderen Seite erstellt habe. Die Registerkarten sind formatiert, und das CSS wird wegen der Länge weggelassen. Meine HTML-Datei ist test.html und die alternative Datei ist App.js. Wenn ich auf den Tab klicke, möchte ich die in App.js erstellten Visualisierungen anzeigen. Ich habe die Grafiken getestet, um sicherzustellen, dass sie funktionieren. Aber wenn ich auf den Tab klicke, wird nichts angezeigt. Es ist, als würde man auf eine Schaltfläche klicken, an der nichts angehängt ist. Nichts passiert.Erstellen von vertikalen Registerkarten Laden von Visuals von außen JS

Wie kann ich die Grafiken in die Registerkarten einfügen, damit sie angezeigt werden?

Code of test.html Seite (links ich meine CSS Link out CSS ausrichten funktioniert.):

<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 Seite:

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

    } 
}

Quelle

2017-07-27 Travis

ich es herausgefunden! Geringfügige Änderung der HTML Seite und wir sind gut zu gehen! Hier ist der Code für das funktionierende Beispiel:

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

Quelle

2017-07-27 19:30:40 Travis

Erstellen von vertikalen Registerkarten Laden von Visuals von außen JS

Antwort

Verwandte Themen