Odoo 15饼图Tooltip小数去除方法技术求助

问题详情 #

鼠标悬停饼图数据点时，Tooltip显示的房产数量带有两位小数（如X.00），需去除小数部分仅保留整数。相关字段定义如下：

property_type_id = fields.Many2one("estate.property.type", string="Property Type")
property_ids = fields.One2many("estate.property", "property_type_id", string="Properties")

已知Odoo使用Chart.js 2.9.3，尝试扩展代码未成功，经多方资料查询仍未解决。

以下是Odoo 15.0版本中web模块的pie_chart.js核心代码：

odoo.define('web.PieChart', function (require) {
"use strict";

/**
 * This widget render a Pie Chart. It is used in the dashboard view.
 */

var core = require('web.core');
var Domain = require('web.Domain');
var viewRegistry = require('web.view_registry');
var Widget = require('web.Widget');
var widgetRegistry = require('web.widget_registry');
const { loadLegacyViews } = require("@web/legacy/legacy_views");

var qweb = core.qweb;

var PieChart = Widget.extend({
    className: 'o_pie_chart',
    xmlDependencies: ['/web/static/src/legacy/xml/chart.xml'],

    /**
     * @override
     * @param {Widget} parent
     * @param {Object} record
     * @param {Object} node node from arch
     */
    init: function (parent, record, node) {
        this._super.apply(this, arguments);

        var modifiers = node.attrs.modifiers;
        var domain = record.domain.concat(
            Domain.prototype.stringToArray(modifiers.domain || '[]'));
        var arch = qweb.render('web.PieChart', {
            modifiers: modifiers,
            title: node.attrs.title || modifiers.title || modifiers.measure,
        });

        var pieChartContext = JSON.parse(JSON.stringify(record.context));
        delete pieChartContext.graph_mode;
        delete pieChartContext.graph_measure;
        delete pieChartContext.graph_groupbys;

        this.subViewParams = {
            modelName: record.model,
            withButtons: false,
            withControlPanel: false,
            withSearchPanel: false,
            isEmbedded: true,
            useSampleModel: record.isSample,
            mode: 'pie',
        };
        this.subViewParams.searchQuery = {
            context: pieChartContext,
            domain: domain,
            groupBy: [],
            timeRanges: record.timeRanges || {},
        };

        this.viewInfo = {
            arch: arch,
            fields: record.fields,
            viewFields: record.fieldsInfo.dashboard,
        };
    },
    /**
     * Instantiates the pie chart view and starts the graph controller.
     *
     * @override
     */
    willStart: async function () {
        var self = this;
        const _super = this._super.bind(this, ...arguments);
        await loadLegacyViews({ rpc: this._rpc.bind(this) });
        var def1 = _super();

        var SubView = viewRegistry.get('graph');
        var subView = new SubView(this.viewInfo, this.subViewParams);
        var def2 = subView.getController(this).then(function (controller) {
            self.controller = controller;
            return self.controller.appendTo(document.createDocumentFragment());
        });
        return Promise.all([def1, def2]);
    },
    /**
     * @override
     */
    start: function () {
        this.$el.append(this.controller.$el);
        return this._super.apply(this, arguments);
    },
    /**
     * Call `on_attach_callback` for each subview
     *
     * @override
     */
    on_attach_callback: function () {
        this.controller.on_attach_callback();
    },
});

widgetRegistry.add('pie_chart', PieChart);

return PieChart;

});

解决方案 #

通过扩展web.PieChart组件，自定义Chart.js的Tooltip格式化逻辑，将数值转为整数：

步骤1：创建自定义模块JS文件 #

odoo.define('custom_pie_chart.PieChart', function (require) {
    "use strict";

    var PieChart = require('web.PieChart');

    PieChart.include({
        willStart: async function () {
            await this._super(...arguments);
            // 获取Chart实例并修改Tooltip配置
            if (this.controller?.renderer?.chart) {
                const chart = this.controller.renderer.chart;
                // 重写Tooltip标签格式化函数
                chart.options.tooltips.callbacks.label = function(tooltipItem, data) {
                    const label = data.labels[tooltipItem.index] || '';
                    const value = parseInt(data.datasets[0].data[tooltipItem.index]);
                    return `${label}: ${value}`;
                };
                chart.update();
            }
        },
    });

    return PieChart;
});

步骤2：配置模块加载 #

在模块的__manifest__.py中添加该JS文件的引用，确保依赖web模块：

{
    'name': 'Custom Pie Chart Tooltip',
    'version': '1.0',
    'depends': ['web'],
    'data': [],
    'assets': {
        'web.assets_backend': [
            'custom_pie_chart/static/src/js/pie_chart.js',
        ],
    },
}

步骤3：安装模块并测试 #

安装自定义模块后，清除浏览器缓存，刷新页面即可看到Tooltip中的数值已转为整数。

内容的提问来源于stack exchange，提问作者SomeDay