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 回答