从Django到Javascript的Python数据

Question

I am busy on a Django app which analyzes a variety of data (largely using pandas) and then displays the results using Google charts.

Im having trouble figuring out the best way to pass my data from the django view.py which will generally be in a Pandas dataframe or a dict, through to be used in the template files (which use javascript for the google charts).

Here's some code showing a javascript function for displaying one of the charts. In this example i've hard coded the data into the chart (ie: The years and the sales have been manually typed in). However what needs to be done is to instead use the data from the pandas dataframe.

function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2004',  1000],
        ['2005',  1170],
        ['2006',  660],
        ['2007',  1030]
    ]);

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }

It's easy enough to pass through single variables or even lists using the django template language {{ var }}. However im not entirely sure how to pass through more complicated dataframes, dicts, etc to be used in javascript functions.

Many thanks.

Answer 1

Is this what you want?

views.py:

import json

def some_view_func(request):
    data = [
        ['Year', 'Sales'],
        ['2004',  1000],
        ['2005',  1170],
        ['2006',  660],
        ['2007',  1030]
    ]
    render(request, 'template.html', {'data': json.dumps(data)})

template.html :

<script>
    var data = google.visualization.arrayToDataTable(JSON.parse({{data}}));
</script>

Answer 2

this is the way to achieve what I think you want

def view_func(request):
    data =pd.DataFrame(np.random.randn(20, 5)) 

    render(request, 'template.html', {'data': data.to_html()})

See the documentation for extra details on CSS styling and other things.

Also implement data as 'safe' in your template as follows:

{{ data | safe }}