0

我正在尝试将 vtiger 图形外观更改为 highchart 外观。但我是 vtiger 的新手，所以请帮我更改 vtiger 图形布局。

4

3 回答 3

1

我已将 vTiger 中的 Highcharts 与自定义仪表板集成在一起。

请按照以下步骤在 vTiger 中集成 highcharts：

  • 包含所有 highcharts JS 文件

  • 添加新的 tpl 文件 /layouts/vlayout/modules/Home/Dashboards/customreports.tpl 和

  • 将其包含在 DashboardPreProcess.tpl 文件中

  • 您的 JS 文件应如下所示：

    jQuery.Class("Home_ChartView_Js",{
},{
lead_by_status : function(){

    var form=jQuery('#frm_slreport');

    form.find('.btn_sl_report').on('click',function(e){
        console.log("Click");
    var sl_fromdate  = form.find('[name="sl_fromdate"]').val();
    var sl_todate  = form.find('[name="sl_todate"]').val();
    console.log(sl_fromdate);
    console.log(sl_todate);

            /* AJAX CALL */

    var progressIndicatorElement = jQuery.progressIndicator({
        'position' : 'html',
        'blockInfo' : {
        'enabled' : true,
        'elementToBlock' : jQuery('#sl_report')
    }
    });
    var params = {};
    params['module'] = 'Accounts';
    params['parent'] = '';
    params['view'] = 'LoadChartData';
    params['mode'] = 'loadChart_lead_by_status';
    params['edate'] = sl_todate;
    params['start_date'] = sl_fromdate;
    //console.log(params);

    AppConnector.request(params).then(function(data){
            var returnedData = JSON.parse(data);
            var fdata=returnedData.result.fdata;
            console.log(fdata);
                                //fdata=JSON.parse(fdata);
            var data1=[{
                            name: 'Counter',
                            colorByPoint: true,
                            data: eval(fdata)
                       }];
            $('#sl_report').highcharts({
                    chart: {
                    type: 'column'
                    },
                    title: {
                    text: sl_fromdate+' to '+sl_todate
                    },
                    xAxis: {
                    type: 'category'
                    },

                    legend: {
                    enabled: false
                    },

                    plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        }
                    }
                    },

                    series: data1,
                    drilldown: {}
            });

            progressIndicatorElement.progressIndicator({mode : 'hide'});
    });



            /* AJAX CALL */



});
},
});

  • btn_sl_reportid 应该存在于 customreports.tpl

  • 使用您在 Ajax 调用中提到的函数名称更新视图文件。

希望它能帮助您在 vTiger 中集成 highcharts。

于 2017-05-04T13:37:08.513 回答
0

你指的是哪个图表？尽管您可以检查这些文件：

VTRoot-> /modules/Dashboard/horizo ​​ntal_bargraph.php
VTRoot-> /modules/Dashboard/vertical_bargraph.php
VTRoot-> /modules/Potentials/Charts.php

按来源领先：

VTRoot-> /modules/Dashboard/Chart_pipeline_by_lead_source.php

于 2013-03-12T11:10:12.113 回答
0

转到布局/vlayout/modules/Vtiger/resources/dashboards/Widget.js

您将在那里看到图表代码。删除当前库代码并在那里添加 Highchart 代码。您将从 Vtiger 获取数据。您应该为 Highchart 准备数据并在那里更新。

于 2017-07-31T09:32:24.940 回答