Home Explore Help
Register Sign In
zachary
/
chart
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

zachary 4 years ago
parent
2511dc42a2
commit
b1649be7a8
2 changed files with 99 additions and 0 deletions
Split View Show Diff Stats
  1. 85 0
      chart.html
  2. 14 0
      jsonUpload.js

+ 85 - 0
chart.html
View File 

@@ -0,0 +1,85 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <title>chart</title>
 
+        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 
+        <!-- <script src='./jsonUpload.js'></script> -->
 
+    </head>
 
+    <body>
 
+        <div id='chart'>
 
+        <div>
 
+            <input type='file' id='jsonfile'/>
 
+        </div>
 
+            
+        </div>
 
+        <script>
 
+                var jsonData;
 
+                var inputElement = document.getElementById('jsonfile');
 
+                inputElement.addEventListener('change', handleFiles, false);
 
+                function handleFiles() {
 
+                    let selectedFile = document.getElementById('jsonfile').files[0];
 
+
 
+                    let reader = new FileReader();
 
+                    reader.readAsText(selectedFile);
 
+
 
+                    reader.onload = function () {
 
+                        console.log("读取结果：",this.result);
 
+                        // jsonData = this.result;
 
+                        let json = JSON.parse(this.result);
 
+                        console.log(json[0]['uuid']);
 
+                        console.log(json[0]['major']);
 
+                        jsonData = json
 
+                    }
 
+                }
 
+
 
+
 
+
 
+
 
+                setTimeout(() => {
 
+                    let example = []
 
+                    for (let obj of jsonData) {
 
+                        if (obj.id == '10001') {
 
+                            example.push(obj.distance)
 
+                        }
 
+                    }
 
+                    var options = {
 
+                        series: [{
 
+                            name: "Desktops",
 
+                            data: example
 
+                        }],
 
+                        chart: {
 
+                            height: 350,
 
+                            type: 'line',
 
+                            zoom: {
 
+                                enabled: false
 
+                            }
 
+                        },
 
+                        dataLabels: {
 
+                            enabled: false
 
+                        },
 
+                        stroke: {
 
+                            curve: 'straight'
 
+                        },
 
+                        title: {
 
+                            text: 'Product Trends by Month',
 
+                            align: 'left'
 
+                        },
 
+                        grid: {
 
+                            row: {
 
+                                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
 
+                                opacity: 0.5
 
+                            },
 
+                        },
 
+                        xaxis: {
 
+                            // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
 
+                            categories: Array.from({ length: example.length }, (item, index) => index + 1)
 
+                        }
 
+                    };
 
+
 
+                    var chart = new ApexCharts(document.querySelector("#chart"), options);
 
+                    chart.render();
 
+                }, 7000);
 
+                
+        </script>
 
+    </body>
 
+</html>

+ 14 - 0
jsonUpload.js
View File 

@@ -0,0 +1,14 @@
 
+var inputElement = document.getElementById('jsonfile');
 
+inputElement.addEventListener('change',handleFiles,false);
 
+function handleFiles(){
 
+    let selectedFile = document.getElementById('jsonfile');
 
+
 
+    let reader = new FileReader();
 
+    reader.readAsText(selectedFile);
 
+
 
+    reader.onload = function(){
 
+        let json = JSON.parse(this.result);
 
+        console.log(json.name);
 
+        console.log(json.age);
 
+    }
 
+}