烧瓶及；Python：如何使用GoogleCharts折线图绘制从pandas数据框获得的数据？

我有一个类的个人时间50米，它声明了表个人时间50米，如下代码所示：

class Individual_top_times_50m(db.Model):        

    __tablename__ = 'individual_top_times_50m'                        

    id = db.Column(db.Integer, primary_key = True )

    event_name = db.Column(db.String(80), nullable = False, unique = False) 
    
    time = db.Column(db.Time, nullable = False)

    lcm = db.Column(db.String(1), nullable = False)

    pts =  db.Column(db.Integer, nullable = False)

    gender = db.Column(db.String(1), nullable = False)

    athlete_name = db.Column(db.String(320), nullable = False)

    athlete_age = db.Column(db.Integer, nullable = False)

    club_name = db.Column(db.String(80), nullable = False)

    date = db.Column(db.Date, nullable = False)

    competition_name = db.Column(db.String(80), nullable = False)

    def __repr__(self):
        return '<Individual_top_times_50m %r>' % self.event_name

它返回与事件“Women 200 Free”关联的所有行。数据在数据帧中返回，如下所示：

    id      event_name             time lcm  ...  athlete_age club_name        date                               competition_name
    0  170  Women 200 Free  00:02:07.890000   L  ...           15       ENP  2019-03-08  VI CAMP NAC INTERCLUBES CARLOS LUIS GILBERT V
    1  171  Women 200 Free  00:02:12.650000   L  ...           17      CDDQ  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    2  172  Women 200 Free         00:02:13   L  ...           15       ENP  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    3  173  Women 200 Free  00:02:13.130000   L  ...           18      CDDQ  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    4  174  Women 200 Free  00:02:15.100000   L  ...           15      TOME  2019-03-08  VI CAMP NAC INTERCLUBES CARLOS LUIS GILBERT V

[datetime.date(2019, 3, 8), datetime.time(0, 2, 7, 890000), 'Michelle Jativa Revelo']

        <script>
        /* Chart1 */
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart1);
        
        function drawChart1() { 
    
            var data = google.visualization.arrayToDataTable([
                ['date','time'],
                {% for date,time,athlete_name in values1 %}
                [new Date("{{date}}"), [moment("{{time}}").hour(),moment("{{time}}").minutes(),moment("{{time}}").seconds(),moment("{{time}}").milliseconds()]],
                {% endfor %}
            ]);
            

            var options = {
                title: '{{ legend1 }}',
                titleTextStyle: {color: '#607d8b', fontName: 'Roboto', fontSize: '12', bold: true},  
                curveType: 'function',
                legend: {position: 'top', alignment: 'center', textStyle: {color:'#607d8b', fontName: 'Roboto', fontSize: '12'} },
                colors: ['#5cb85c'], /* green */
                areaOpacity: 0.24,
                lineWidth: 1,
                backgroundColor: 'transparent',
                pointSize: 7.5,
                chartArea: {
                    backgroundColor: 'transparent'
                },
                series: { 0: {pointShape: 'diamond'}},
                vAxis: {
                    title: 'Time',
                    titleTextStyle: {color: '#607d8b'},  
                    textStyle: { color: '#b0bec5', fontName: 'Roboto', fontSize: '12', bold: true},
                    format: 'mm:ss.ss',
                    scaleType: 'linear',
                    gridlines: {
                        color:'#37474f', 
                        count: 10  
                    },
                    baselineColor: 'transparent',
                },
                hAxis : {
                    title: 'Date',
                    titleTextStyle: {color: '#607d8b'},  
                    textStyle: { color: '#b0bec5', fontName: 'Roboto', fontSize: '12', bold: true},
                    format: 'yyyy',
                    scaleType: 'linear'
                }
            };
        
            var chart = new google.visualization.LineChart(document.getElementById('chart1_div1'));
            chart.draw(data, options);
        }
        


    $(window).resize(function(){
        drawChart1();       
    });

    </script>

如您所见，“时间”列和“日期”列的数据以正确的格式显示（考虑到它们在屏幕上的显示如图所示）

绘制图表。我将数据帧转换为列表（列表名称为values1）。因为jinja中的模板接收列表

转换后，列表以两种不同于预期的格式显示日期和时间数据。为了清晰起见，我包括了第一个要绘制的数据。详情如下:

    id      event_name             time lcm  ...  athlete_age club_name        date                               competition_name
    0  170  Women 200 Free  00:02:07.890000   L  ...           15       ENP  2019-03-08  VI CAMP NAC INTERCLUBES CARLOS LUIS GILBERT V
    1  171  Women 200 Free  00:02:12.650000   L  ...           17      CDDQ  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    2  172  Women 200 Free         00:02:13   L  ...           15       ENP  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    3  173  Women 200 Free  00:02:13.130000   L  ...           18      CDDQ  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    4  174  Women 200 Free  00:02:15.100000   L  ...           15      TOME  2019-03-08  VI CAMP NAC INTERCLUBES CARLOS LUIS GILBERT V

[datetime.date(2019, 3, 8), datetime.time(0, 2, 7, 890000), 'Michelle Jativa Revelo']

        <script>
        /* Chart1 */
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart1);
        
        function drawChart1() { 
    
            var data = google.visualization.arrayToDataTable([
                ['date','time'],
                {% for date,time,athlete_name in values1 %}
                [new Date("{{date}}"), [moment("{{time}}").hour(),moment("{{time}}").minutes(),moment("{{time}}").seconds(),moment("{{time}}").milliseconds()]],
                {% endfor %}
            ]);
            

            var options = {
                title: '{{ legend1 }}',
                titleTextStyle: {color: '#607d8b', fontName: 'Roboto', fontSize: '12', bold: true},  
                curveType: 'function',
                legend: {position: 'top', alignment: 'center', textStyle: {color:'#607d8b', fontName: 'Roboto', fontSize: '12'} },
                colors: ['#5cb85c'], /* green */
                areaOpacity: 0.24,
                lineWidth: 1,
                backgroundColor: 'transparent',
                pointSize: 7.5,
                chartArea: {
                    backgroundColor: 'transparent'
                },
                series: { 0: {pointShape: 'diamond'}},
                vAxis: {
                    title: 'Time',
                    titleTextStyle: {color: '#607d8b'},  
                    textStyle: { color: '#b0bec5', fontName: 'Roboto', fontSize: '12', bold: true},
                    format: 'mm:ss.ss',
                    scaleType: 'linear',
                    gridlines: {
                        color:'#37474f', 
                        count: 10  
                    },
                    baselineColor: 'transparent',
                },
                hAxis : {
                    title: 'Date',
                    titleTextStyle: {color: '#607d8b'},  
                    textStyle: { color: '#b0bec5', fontName: 'Roboto', fontSize: '12', bold: true},
                    format: 'yyyy',
                    scaleType: 'linear'
                }
            };
        
            var chart = new google.visualization.LineChart(document.getElementById('chart1_div1'));
            chart.draw(data, options);
        }
        


    $(window).resize(function(){
        drawChart1();       
    });

    </script>

获得的所有行如下（作为示例）：

我希望在列表中获得的格式如下：

[new Date("{{date}}"), [moment("{{time}}").hour(),moment("{{time}}").minutes(),moment("{{time}}").seconds(),moment("{{time}}").milliseconds()]],

我将源代码附在Flask中：

@app.route('/ranking_top_times_women_chart')
def ranking_top_times_women_chart():

    import pandas as pd
    from pandas import DataFrame

    df = pd.read_sql(db.session.query(Individual_top_times_50m).filter(Individual_top_times_50m.event_name=="Women 200 Free").statement,db.session.bind)

    df = pd.DataFrame(df, columns = ['date', 'time', 'athlete_name'])

    # Convert pandas DataFrame to List
    values1 = df.values.tolist()
    
    return render_template('web/ranking_top_times_women_chart.html', values1 = values1)        

jinja2模板摘录如下：

    id      event_name             time lcm  ...  athlete_age club_name        date                               competition_name
    0  170  Women 200 Free  00:02:07.890000   L  ...           15       ENP  2019-03-08  VI CAMP NAC INTERCLUBES CARLOS LUIS GILBERT V
    1  171  Women 200 Free  00:02:12.650000   L  ...           17      CDDQ  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    2  172  Women 200 Free         00:02:13   L  ...           15       ENP  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    3  173  Women 200 Free  00:02:13.130000   L  ...           18      CDDQ  2019-05-14        CAMP NAC ABS LUIS ALCIVAR ELIZALDE 2019
    4  174  Women 200 Free  00:02:15.100000   L  ...           15      TOME  2019-03-08  VI CAMP NAC INTERCLUBES CARLOS LUIS GILBERT V

[datetime.date(2019, 3, 8), datetime.time(0, 2, 7, 890000), 'Michelle Jativa Revelo']

        <script>
        /* Chart1 */
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart1);
        
        function drawChart1() { 
    
            var data = google.visualization.arrayToDataTable([
                ['date','time'],
                {% for date,time,athlete_name in values1 %}
                [new Date("{{date}}"), [moment("{{time}}").hour(),moment("{{time}}").minutes(),moment("{{time}}").seconds(),moment("{{time}}").milliseconds()]],
                {% endfor %}
            ]);
            

            var options = {
                title: '{{ legend1 }}',
                titleTextStyle: {color: '#607d8b', fontName: 'Roboto', fontSize: '12', bold: true},  
                curveType: 'function',
                legend: {position: 'top', alignment: 'center', textStyle: {color:'#607d8b', fontName: 'Roboto', fontSize: '12'} },
                colors: ['#5cb85c'], /* green */
                areaOpacity: 0.24,
                lineWidth: 1,
                backgroundColor: 'transparent',
                pointSize: 7.5,
                chartArea: {
                    backgroundColor: 'transparent'
                },
                series: { 0: {pointShape: 'diamond'}},
                vAxis: {
                    title: 'Time',
                    titleTextStyle: {color: '#607d8b'},  
                    textStyle: { color: '#b0bec5', fontName: 'Roboto', fontSize: '12', bold: true},
                    format: 'mm:ss.ss',
                    scaleType: 'linear',
                    gridlines: {
                        color:'#37474f', 
                        count: 10  
                    },
                    baselineColor: 'transparent',
                },
                hAxis : {
                    title: 'Date',
                    titleTextStyle: {color: '#607d8b'},  
                    textStyle: { color: '#b0bec5', fontName: 'Roboto', fontSize: '12', bold: true},
                    format: 'yyyy',
                    scaleType: 'linear'
                }
            };
        
            var chart = new google.visualization.LineChart(document.getElementById('chart1_div1'));
            chart.draw(data, options);
        }
        


    $(window).resize(function(){
        drawChart1();       
    });

    </script>

任何帮助都将不胜感激。多谢各位