我正在尝试将 vtiger 图形外观更改为 highchart 外观。但我是 vtiger 的新手,所以请帮我更改 vtiger 图形布局。
3 回答
我已将 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_report
id 应该存在于 customreports.tpl- 使用您在 Ajax 调用中提到的函数名称更新视图文件。
希望它能帮助您在 vTiger 中集成 highcharts。
你指的是哪个图表?尽管您可以检查这些文件:
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
转到布局/vlayout/modules/Vtiger/resources/dashboards/Widget.js
您将在那里看到图表代码。删除当前库代码并在那里添加 Highchart 代码。您将从 Vtiger 获取数据。您应该为 Highchart 准备数据并在那里更新。