vtiger - 在vtiger中集成highcharts？

Question

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

Answer 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。

Answer 2

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

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

Answer 3

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

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