谷歌图表 CSV 下载按钮出现问题

问题描述 投票:0回答:0

尝试从 SQL 数据库查询下载结果为 CSV 时,浏览器无法找到文件。

大家好。我的 HTML 脚本中有以下函数。我希望能够将用户查询的结果下载为 CSV 文件。当我呈现网页并查询数据库时,工具栏出现;但是,当我尝试下载结果的 CSV 文件时,我的浏览器找不到该文件。任何关于我哪里出错的指示都将不胜感激。谢谢!

function google_piechart() {
            
            var class_choice = $('#class_choice').val();
            if (class_choice == null) {
                alert('Please select a class.');
                return false;
                }
            console.log('Selected class:', class_choice);

            // get data from output of Python script
            $.get("https://bioed.bu.edu/cgi-bin/students_23/Team_H/class_cgi.py",
                {selector: 'piechart',  class_choice:class_choice},
                // need to use the Google charts pie chart function here to generate from data...
                function (res){
                    console.log('Received data:', res);
                    create_piechart(res);
                },
                "json"
            );
        }
        
        
        // define that function here, now
        function create_piechart(res, class_choice) {
            console.log('Processed data:', res, class_choice);
            global_data1 = res

            // use strict equality operator here...don't want weird results from just `==`

            if (res.length === 0)
                $('#piechart').html('There was no data for the class choice: ' + class_choice);
         

            let formatted_results = res.map(item => item.slice(0, 2));
            console.log(formatted_results);
            // adding a header
            formatted_results.unshift(["Transposon Order", "Count"]);

            // get the total count of results
            let total_count = res.reduce((sum, item) => sum + item[1], 0);
            console.log('Total count:', total_count)
    
            // return total count to the screen for the user
            $('#result_count').html('Total number of results: ' + total_count);


            // loading Google charts info
            google.charts.load('current', {'packages': ['corechart', 'table', 'gauge']});
            google.charts.setOnLoadCallback(function () {
                // format processed data for use w/ Google charts
                var chart_data = google.visualization.arrayToDataTable(formatted_results);
                console.log('Chart data:', chart_data);
                // options for the piechart
                var options = {

                    title: 'Transposon Orders by Class',
                    fill: 'transparent'
                    is3D: true,
                    colors: ['#0072B2', '#E69F00', '#009E73', '#F0E442', '#CC79A7', '#D55E00', '#56B4E9', '#0072B2', '#F0E442', '#009E73', '#D55E00', '#CC79A7']
                };

                // finally creating the pie chart
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(chart_data, options);

                // create a table with the same data
                var table = new google.visualization.Table(document.getElementById('table1'));
                // execute here
                table.draw(chart_data, {
                    title: 'Transposon Orders by Class',
                    showRowNumber: false, 
                    width: '50%'
                });
        
                // convert data table to CSV format
                var csv_data = google.visualization.dataTableToCsv(chart_data);
                console.log('CSV data:', csv_data)

                // draw the toolbar
                var components = [
                {type: 'csv', datasource: csv_data}
                ];


                var toolbarContainer = document.getElementById('toolbar_div1');
                google.visualization.drawToolbar(toolbarContainer, components);
            });
        }
javascript python html mysql google-visualization
© www.soinside.com 2019 - 2024. All rights reserved.