Javascript 从Django模型获取数据到Google图表

我试图显示商店里最畅销商品的图表。因此，我需要从数据库中获取信息并将其输入html。图表似乎没有加载。当我尝试使用静态数据（来自谷歌的示例）时，效果很好。然而，我似乎不能用动态数据来做这件事。我将数组转换为json，并在html中执行

|safe

以进行转义。但它仍然没有出现。如果有人对如何修复它有建议，请帮助

下面是my views.py，我在其中调用包含图表脚本的html文件

def charts(request):
    data_arr = []
    for item in Item.objects.all():
        data_arr.append([item.ItemName, item.quantity_sold])
    return render(request,'coffeeapp/charts.html',{'item':json.dumps(data_arr)})

这是我在charts.html文件中的代码

<script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable(
                ['Item', 'Quantity Sold'],
                [{{item|safe}}]
            );
            
            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
            chart.draw(data, null);
        }
    </script>

    <!--Div that will hold the pie chart-->
    <div id="myPieChart"/>

<script>
    draw_chart({{ data }})
</script>

在browser/html中，我添加了一个

警报（{{item | safe}}）

作为

函数drawChart（）

下的第一行，它精确地显示了我看到的项目。 一些结果如下

Espresso,0,Cappuccino,2,Black Coffee,0,Cafe Latte,0,Mocha,0,Iced Americano,0,Iced Caramel Macchiato,0,Cold Brew,0....

编辑2-解决方案

在马可的回答的帮助下，我解决了这个问题。Marco找到了修复标签的答案，但数据行是静态的，即手动输入的，而我想从数据库中获取数据。 因此，我将我的观点修改为这样

def charts(request):
    return render(request,'coffeeapp/charts.html',{'item':Item.objects.all()})

我的html将是：

<script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            // Define the chart to be drawn.
            
        var data = google.visualization.arrayToDataTable([
            [{ label: 'Item', type: 'string' },
            { label: 'Quantity Sold', type: 'number' }],
            {% for i in item %}
                ['{{ i.ItemName }}', {{ i.quantity_sold }}],
            {% endfor %}
        ]);
        var options = {
            'title': 'MOST ORDERED DRINKS',
            'width': 700,
            'height': 700
        };
        // Instantiate and draw the chart.
        var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
        chart.draw(data, options);
        }

    </script>

load（'current'，{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
//定义要绘制的图表。
var data=google.visualization.arrayToDataTable([
[{label:'Item'，type:'string'}，
{标签：'销售数量'，键入：'编号'}]，
{项目%中的i为%1}
[{i.ItemName}}，{i.quantity_Sald}}，
{%endfor%}
]);
变量选项={
‘标题’：‘订购最多的饮料’，
“宽度”：700，
‘高度’：700
};
//实例化并绘制图表。
var chart=new google.visualization.PieChart（document.getElementById（'myPieChart'）；
图表绘制（数据、选项）；
}

---

我不确定它是如何工作的，但它没有safe关键字。

仔细检查您的图表设置-似乎您需要更多设置来创建饼图的标签

这是工作配置：

  // Define the chart to be drawn.
  // Data settings = modified for generate the Pie Chart: 
  var data = google.visualization.arrayToDataTable([
    [{label: 'Item', type: 'string'}, 
     {label: 'Quantity Sold', type: 'number'}],
    ['Espresso', 0],
    ['Cappuccino', 2],
    ['Black Coffee', 0],
    ['Cafe Latte', 0],
    ['Mocha', 0],
    ['Iced Americano', 0],
    ['Iced Caramel Macchiato', 0],
    ['Cold Brew', 0]
  ]);

根据您在问题中提供的信息，我修改了代码，并看到生成的图表

N.B:您的值为

0

，因此，如果所有值均为零，则不会显示任何图表 在您的示例数据中，只有

1

咖啡具有更大的值 小于零：

这是最新的

google.charts.load（'current'{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
//定义要绘制的图表。
//数据设置=已修改以生成饼图：
var data=google.visualization.arrayToDataTable([
[{
标签：'项目'，
键入：“字符串”
},
{
标签：“销售数量”，
键入：“数字”
}
],
[Espresso'，0]，
['Cappuccino'，2]，//这是将在图表中显示的值。
[“黑咖啡”，0]，
[Cafe Latte'，0]，
['Mocha'，0],，
['Iced Americano'，0]，
[‘冰焦糖玛奇朵’，0]，
['Cold Brew'，0]
]);
//实例化并绘制图表。
var chart=new google.visualization.PieChart（document.getElementById（'myPieChart'）；
图表绘制（数据，空）；
}

在views.py中

def send_data(request):
    # get data ...
    # convert to dual items in tuple, dictionary, list & etc...
    return render(request, 'template_name', context={'data':data})

在javascript文件中

const draw_chart = (data) => {
    // draw chart....
}

在模板html文件中

<script>
    draw_chart({{ data }})
</script>

绘制图表（{data}}）

我不了解python，但是，您是否检查浏览器中是否有错误？-此外，您还可以通过使用

console.log

或以某种方式打印这些结果来检查

[{{item | safe}}}]

-在您的问题中添加结果和错误（如果有）。@Marcourelio Fernandezreyes我已经编辑了我的问题。“item”的值与结果相符，因此我不知道我处理数据表的方式是否有问题。谢谢您的帮助。我能够结合适当的标签和一些Python代码，它神奇地工作：）@ Pypydippy，如果这个答案解决了你的问题，请考虑，我确实读过你在这个问题上发布你的解决方案，在那种情况下，你可以——这就是它的工作原理。谢谢

<script>
    draw_chart({{ data }})
</script>