如何從以.json文件中的JavaScript

$(function() { 
    $(".column").sortable({ 
     connectWith: ".column", 
     handle: ".portlet-header", 
     cancel: ".portlet-toggle", 
     placeholder: "portlet-placeholder ui-corner-all" 
    }); 

    $(".portlet") 
     .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
     .find(".portlet-header") 
     .addClass("ui-widget-header ui-corner-all") 
     .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); 

    $(".portlet-toggle").click(function() { 
     var icon = $(this); 
     icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
     icon.closest(".portlet").find(".portlet-content").toggle(); 
    }); 
    }); 











    $(function(json) { 
    $("#dialog").dialog(); 
    console.log(json); 

    }); 

$.getJSON("AnalyticsFoxMain.json", function(json) { 
    console.log(json); // this will show the info it in firebug console 

    window.onload = function() { 
    d3.json("data.json", function(data) { 
    console.log(data[0]); 
}); 
    console.log(json); 

    $('#jsonImage').attr('src', json.image); 
    $('#jsonText' ).text(json.Company); 
    $('#jsonCde').text(json.Brand); 
    $('#jsonDesc').text(json.Description); 
    var chart = new CanvasJS.Chart("chartContainer", 
    { 
     title:{ 
      text: "sentiment" 
     }, 
       animationEnabled: true, 
     legend:{ 
      verticalAlign: "center", 
      horizontalAlign: "left", 
      fontSize: 12, 
      fontFamily: "Helvetica"   
     }, 
     theme: "red and blue", 
     data: [ 
     {   
      type: "pie",  
      indexLabelFontFamily: "Garamond",  
      indexLabelFontSize: 20, 
      indexLabel: "{label} {y}", 
      startAngle:-25,  
      showInLegend: true, 
      toolTipContent:" {y}", 
      dataPoints: [ 
       { y: json.Sentiment.positive}, 
       { y: json.Sentiment.negative}, 

      ] 
     } 
     ] 
    }); 
    chart.render(); 
var chart = new CanvasJS.Chart("chartContainer1", 
    { 

     title: { 
      text: "Source" 
     }, 
     data: [ 
     { 
      type: "doughnut", 
      indexLabel: " {y}", 
      toolTipContent: "{y}", 
      dataPoints: [ 
       { y: json.Source.facebook}, 
       { y: json.Source.twitter}, 
       { y: json.Source.mouthshut} 
      ] 
     } 
     ] 
    }); 
    chart.render(); 





google.charts.load('current', {'packages':['corechart']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 

     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Dealer1', 3540 ], 
      ['Dealer2',1320] 

     ]); 

     var options = { 
      title: 'others' 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

     chart.draw(data, options); 
     } 
chart.render(); 



    $(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Adjectives', 
      align: 'center', 
      verticalAlign: 'middle', 
      y: 40 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>' 
     }, 
     plotOptions: { 
      pie: { 
       dataLabels: { 
        enabled: true, 
        distance: -50, 
        style: { 
         fontWeight: 'bold', 
         color: 'white', 
         textShadow: '0px 1px 2px black' 
        } 
       }, 
       startAngle: -90, 
       endAngle: 90, 
       center: ['50%', '75%'] 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Adjectives', 
      innerSize: '50%', 
      data: [ 
       ['Space Inside',  2000], 

       ['Looks', 4000], 
       ['Reliability', 3000], 
       { 
        name: 'Proprietary or Undetectable', 
        y: 0.2, 
        dataLabels: { 
         enabled: false 
        } 
       } 
      ] 
     }] 
    }); 
}); 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "pie", 
    "theme": "light", 
    "dataProvider": [ { 
    "title": "petrol", 
    "value": 3540 
    }, { 
    "title": "Diesel", 
    "value": 1320 
    } ], 
    "titleField": "title", 
    "valueField": "value", 
    "labelRadius": 5, 

    "radius": "42%", 
    "innerRadius": "60%", 
    "labelText": "[[title]]", 
    "export": { 
    "enabled": true 
    } 
}); 



    } 


    $(function() { 
    $('#container1').highcharts({ 
     chart: { 
      type: 'pie', 
      options3d: { 
       enabled: true, 
       alpha: 350 
      } 
     }, 
     title: { 
      text: 'Issues' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     plotOptions: { 
      pie: { 
       innerSize: 50, 
       depth: 10 
      } 
     }, 
     series: [{ 
      name: '', 
      data: [ 
       ['GearProblems', 4000], 
       ['EngineKnocking', 2000], 
       ['PowerWindows',3000] 
      ] 
     }] 
    }); 
}); 
});

@import url(http://weloveiconfonts.com/api/?family=entypo); 

/* entypo */ 
[class*="entypo-"]:before { 
    font-family: 'entypo', sans-serif; 
} 

::selection { 
background: transparent; 
} 

html { 

    margin:10px 200px 80px 80px; 
    padding:1px ; 
    background:white; 
} 





#content { 
    text-align:center; 

    position:absolute; 
    left:10px; 
    right:10px; 
    margin:auto; 
    padding:120px 0 10px 0; 

    width:200px; 
    height:50px; 
} 

input[type="checkbox"]{display:none;} 

.checkbox:checked + .label{ 
    background:#7B7484; 
    color:#231733; 
} 

.checkbox:checked ~ .social { 
    opacity:1; 
    -webkit-transform: scale(1) translateY(-90px); 
    -moz-transform:scale(1) translateY(-90px); 
    -o-transform:scale(1) translateY(-90px); 
    transform:scale(1) translateY(-90px); 
    -webkit-transition:.5s; 
    -moz-transition:.5s; 
    -o-transition:.5s; 
    transition:.5s; 
} 

.label { 
    font-size:16px; 
    cursor:pointer; 
    margin:0; 
    padding:5px 10px; 

    border-radius:100%; 
    color:#7B7484; 
} 

.social { 
    transform-origin:50% 0%; 

    -webkit-transform: scale(0) translateY(-190px); 
    -moz-transform:scale(0) translateY(-190px); 
    -o-transform:scale(0) translateY(-190px); 
    transform:scale(0) translateY(-190px); 

    opacity:0; 
} 
ul { 
    position:bottom; 
    left:0; 
    right:0; 
    margin:auto; 
    color:#fff; 
    height:46px; 
    width:180px; 
    background:#3B5998; 
    padding:0; 
    list-style:none; 
} 

ul li { 
    font-size:20px; 

    cursor:pointer; 
    width:60px; 
    margin:0; 
    padding:12px 0; 
    text-align:center; 
    float:left; 
    display:block; 
    height:22px;} 

ul li:hover {color:rgba(0,0,0,.5);} 

ul:after { 
    content:''; 
    display:block; 
    position:absolute; 
    left:0; 
    right:0; 
    margin:35px auto; 
    height:0; 
    width:0; 

    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid #3B5998; 
} 

li[class*="twitter"] 


body { 
    padding:105px; 
    vertical-align: Centered; 
    } 

    .column { 
    width: 350px; 
    float: left; 
    padding-bottom: 100px; 
    } 
    .portlet { 
    margin: 0 1.2em 1em 0; 
    padding: 0.3em; 
    } 

    .portlet-toggle { 
    position: absolute; 
    top: 10%; 
    right: 0; 
    margin-top: -8px; 
    } 
    .portlet-content { 
    padding: 0px; 
    } 
    .portlet-placeholder { 
    border: 1px dotted black; 
    margin: 0 1em 1em 0; 
    height: 150px; 
    } 










/** 
* Footer Styles 
*/ 

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 20px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 



#chartdiv { 
    width  : 100%; 
    height  : 435px; 
    font-size : 11px; 
}

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Dashboard</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="app.css"> 
<link href="css/leaf.css" rel="stylesheet" type="text/css" /> 
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script type="text/javascript" src="script.js"></script> 
<script type="text/javascript" src="script.js"></script> 
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 


<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-3d.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 


<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/pie.js"></script> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
</head> 
<body> 
<center> 
<h1 style="color:blue; font-size:25pt">AUTOLYTICS </h1> 
</center> 
<div> 
<table style="width:550; height:180 "> 
<td>  
<img src="" id="jsonImage" style="width: 400px; height: 230px;" /> 
</td> 
<td> 
<div style="width:550px;height:200px;padding:1px;border:1px hidden; float:right"> 
    <strong> 

<p id="jsonText" style="float:left;"></p> 
    <p id="jsonCde" style="padding-left : 5px;float:left;"></p> 
    </strong> 
    <p id="jsonDesc" style="ALIGN:justify ;width: 500px; height: 110px;float:right "> </p> 


    <button name="button" style="float: right;" >search</button> 
    <input type="text" placeholder="eg.Mumbai" size= 55; style=" border:1px solid #ff0040;float:right " /> 

    </td> 

</div> 
</table> 

</div> 




<div> 
<div class="column"> 

    <div class="portlet"> 
    <div class="portlet-header">Sentiment</div> 
    <div class="portlet-content"> 
    <div id="chartContainer" style="width: 300px; height: 200px;"></div> 
     </div> 
    </div> 

    <div class="portlet"> 
    <div class="portlet-header">Source</div> 
    <div class="portlet-content"> 
     <div id="chartContainer1" style="width: 300px; height: 200px;"></div> 
     </div> 
    </div> 
</div> 


<div class="column"> 

    <div class="portlet"> 
    <div class="portlet-header">Issues</div> 
    <div class="portlet-content"> 
    <div id="container1" style="width: 300px; height: 200px;"></div> 
     </div> 
    </div> 

    <div class="portlet"> 
    <div class="portlet-header">Adjectives</div> 
    <div class="portlet-content"> 
    <div id="container" style="width: 300px; height: 200px;"></div> 
     </div> 
    </div> 
</div> 

<div class="column"> 
    <div class="portlet"> 
    <div class="portlet-header">Type</div> 
    <div class="portlet-content"> 
    <div id="chartdiv" style="width: 400px; height: 200px;"></div> 
     </div> 
    </div> 
<div class="portlet"> 
    <div class="portlet-header">others</div> 
    <div class="portlet-content"> 
    <div id="piechart" style="width: 300px; height: 200px;"></div> 
     </div> 
    </div> 
</div> 

<div id="dialog" title="popup"> 

</div> 


<footer> 
<div id="content"> 
    <input type="checkbox" class="checkbox" id="share" checked> 
    <label for="share" class="label entypo-export"></label> 
    <div class="social"> 
    <ul> 
     <li class="entypo-twitter"></li> 
     <li class="entypo-facebook"></li> 
     <li class="entypo-gplus"></li> 
    </ul> 
    </div> 
</div> 
</footer> 

</body> 
</html>

如何從以.json文件中的JavaScript

這是我的項目呈現JSON數據在彈出窗口中，在這個項目如何從以.json文件中彈出獲取數據 - 通過使用JavaScript的窗口。在這些代碼如何使用Java的腳本，在這些代碼中的多個JSON文件渲染

來源

2016-02-02 nani

請張貼一些HTML/CSS/JS與問題有關項目的.... – dvenkatsagar

$（ '＃彈出。體'）HTML（」

'+JSON.stringify(yourObject)+'

'） – animaacija

如果你的JSON文件可以通過URL來檢索呈現在彈出的窗口數據：

在JSON文件

：

data = '[ 
    {"surname" : "Alex", "first_name" : "Chaosman"}, 
    {"surname" : "Ben", "first_name" : "Dickson"},]';

在你的HTML：

<script type="text/javascript" src="file.json"></script> 
<script> 
    var arr = JSON.parse(data); 
    console.log(arr[0].first_name + ' ' + arr[0].surname); 
    console.log(arr[1].first_name + ' ' + arr[1].surname); 
</script>

來源

2016-02-02 06:33:03

它不適用於我的項目。 – nani

如何從以.json文件中的JavaScript

回答

相關問題