zachary
/
chart


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