qweb pdf 报告中的图表 - odoo 14答案

【问题标题】：Chart in qweb pdf report - odoo 14qweb pdf 报告中的图表 - odoo 14
【发布时间】：2022-11-11 22:29:34
【问题描述】：

有没有办法在 qweb 报告中打印条形图？

我正在尝试使用 t-raw 属性，但这似乎无法运行 javascript（我正在尝试嵌入 Char.js）

这就是我所做的，但它只是打印它，它在呈现报告之前不运行 javascript：

            <div id="prueba">
            Este texto no ha sido remplazado
            </div>


            <t t-set="meses"/>
            <t t-raw="datos">
                document.getElementById('prueba').innerHTML = '<h1>Remplazado!</h1>';




            </t>

我怎样才能做到这一点？

【问题讨论】：

标签： odoo odoo-14 qweb

【解决方案1】：

有没有办法在 qweb 报告中打印条形图？

我想有多种方法。不幸的是，我无法理解您的代码示例或为什么它与在 qweb 报告中打印图表有关。但是让我来回答这个问题，因为大多数人都会来到这里，因为他们想要这样做。

像你一样，我试图通过使用 Chart.js 和 Odoo 的内置图表渲染来实现它。虽然这可能是可能的，但我很早就放弃了，因为让 Odoo 将图表渲染成 qweb 中的图像可能非常复杂。

最简单的解决方案可能是将图表数据发送到创建图表的 API，例如 quickchart。您可以在他们的doucmentation 中找到所有信息。

下面是一个示例，如何在发票上显示客户当年的月收入按月划分：

在 qweb 视图中添加一个带有 t-att-src 属性的 img 标签
<img style="width: 100%;" t-att-src="doc.chart_img()"/>
此处的 t-att-src 属性调用 account.move 模型上的 chart_img() 方法，该方法返回一个 url，如下所示：
def chart_img():                                                                            
    partner = self.partner_id.id                                                           
    orders_this_year = self.env['sale.order'].read_group(                                  
        ['&', '&',                                                                         
         ('partner_id', '=', partner),                                                     
         ('date_order', '>=', datetime(datetime.today().year, 1, 1)),                      
         ('date_order', '<=', datetime(datetime.today().year, 12, 31))],                   
        ['amount_untaxed'],                                                                
        ['date_order:month']                                                               
    )                                                                                      
    months = [order['date_order:month'] for order in orders_this_year]                     
    rev_values = [order['amount_untaxed'] for order in orders_this_year]                   
                                                                                           
    data = {                                                                               
        'type': 'bar',                                                                     
        'data': {                                                                          
            'labels': months,                                                              
            'datasets': [                                                                  
                {                                                                          
                    'label': datetime.today().year,                                        
                    'data': rev_values                                                     
                },                                                                         
            ]                                                                              
        },                                                                                 
    }                                                                                      
    return f"https://quickchart.io/chart?c={json.dumps(data)}"                             
              
它首先通过调用read_group()方法获取合作伙伴当年按月分组的所有订单。然后将数据转换为快速图表的查询字符串。检索到的图表直接在您的 qweb 报告中显示为图像。请注意，通过使用 python 设置数据并使用 quickchart 功能设置图表样式，您可以创建 Odoo 使用 chart.js 在前端创建的任何图表。

【讨论】：