在vtiger中集成highcharts？

Question

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

Answer 1

我已经在vTiger中集成了Highcharts和自定义仪表盘。

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

• 包括所有highcharts文件，并添加新的第三方逻辑文件/layouts/vlayout/modules/Home/Dashboards/customreports.tpl
• include it in 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(数据)；var fdata=returnedData.result.fdata；console.log(数据)；//fdata=JSON.parse(fdata)；var data1={ name：'Counter'，colorByPoint: true，data: eval(fdata) }；$(‘#sl_report’)图表({.highcharts：{ type：'column‘}，标题：{ text: sl_fromdate+’to '+sl_todate }，xAxis：{类型：‘类别’}，图例：{ enabled: false }，plotOptions：{系列：{ borderWidth: 0，dataLabels：{ enabled: true } }，系列: data1，下钻：{} })；progressIndicatorElement.progressIndicator({mode：‘});

• btn_sl_report’})；})；/* AJAX调用*/ })；}，})；

• btn_sl_report id应该出现在customreports.tpl

• Update视图文件中，其中包含您在Ajax调用中提到的函数名称。

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

Answer 2

转到layouts/vlayout/modules/Vtiger/resources/dashboards/Widget.js

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