Vtiger有其自己的js文件，所以我认为可能存在一些冲突。无论如何，这就是我在浏览器控制台中得到的：
由于以下原因，不赞成在主线程上使用同步XMLHttpRequest：
它对最终用户体验的有害影响。寻求更多帮助
http://xhr.spec.whatwg.org/
错误：Google图表loader.js只能加载一次。
稍后可能是因为vtiger两次调用了.tpl文件，但我不知道为什么。
至于第一个警告：如果jquery附加了外部js文件，就会发生这种情况。我还读到，如果async设置为false，它应该可以工作，但是我不知道如何在vtiger中做到这一点
如果我刷新页面，一切正常。
.tpl：
{strip}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var rawdata = {$SALES|@json_encode};
var scatterdata = [];
var mydata = [];
var count = 0;
var sum = 0;
var num = 0;
for(var i = 0 ; i < rawdata.length; i++){
for(var j = 0 ; j < rawdata[i][1]; j++){
scatterdata[count] = [];
scatterdata[count][0] = rawdata[i][0];
scatterdata[count][1] = rawdata[i][2];
count++;
}
}
count = 0;
for(i = 0; i < scatterdata.length; i++){
sum = 0;
num = 0;
for(j = 0; j < scatterdata.length; j++){
if(scatterdata[i][0] == scatterdata[j][0]){
sum += scatterdata[j][1];
num++;
}
}
mydata[count] = [];
var tmpdate = scatterdata[i][0].split("-");
mydata[count][0] = [];
mydata[count][0][0] = tmpdate[0];
mydata[count][0][1] = tmpdate[1];
mydata[count][0][2] = tmpdate[2];
mydata[count][1] = scatterdata[i][1];
mydata[count][2] = sum / num;
count++;
}
</script>
<script type="text/javascript" src="resources/PFGraph.js"></script>
<pre>
{$SALES|@debug_print_var}
</pre>
<form>
<table class="table table-bordered equalSplit detailview-table">
<thead>
<tr>
<th class="blockHeader" colspan="4">
<img class="cursorPointer alignMiddle blockToggle hide" src="layouts/vlayout/skins/alphagrey/images/arrowRight.png" data-mode="hide" data-id="31">
<img style="display: inline;" class="cursorPointer alignMiddle blockToggle" src="layouts/vlayout/skins/alphagrey/images/arrowDown.png" data-mode="show" data-id="31">
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Product</label>
</td>
<td class="fieldValue medium">{$PRODUCT[0]}</td>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Min Amount</label>
</td>
<td class="fieldValue medium"><input type="text" name="minAmount"></td>
</tr>
<tr>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">List Price</label>
</td>
<td class="fieldValue medium">{$PRODUCT[1]}</td>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Max Amount</label>
</td>
<td class="fieldValue medium"><input type="text" name="maxAmount"></td>
</tr>
<tr>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Lowest Price</label>
</td>
<td class="fieldValue medium"></td>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Min Price</label>
</td>
<td class="fieldValue medium"><input type="text" name="minPrice"></td>
</tr>
<tr>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Average Price</label>
</td>
<td class="fieldValue medium"></td>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Max Price</label>
</td>
<td class="fieldValue medium"><input type="text" name="maxPrice"></td>
</tr>
<tr>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">Highest Price</label>
</td>
<td class="fieldValue medium"></td>
<td class="fieldLabel medium">
<label class="muted pull-right marginRight10px">test</label>
</td>
<td class="fieldValue medium"><button>filter</button></td>
</rt>
</tbody>
</table>
</form>
<style>
#chart_div{
margin: 20px 0px;
padding: 25px;
background-color: white;
width: 96%;
-webkit-box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.3);
box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.3);
}
</style>
<div id="chart_div" ></div>
{/strip}
.js：
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Price');
data.addColumn('number', 'Price (Average)');
var maxval = 0;
for(var i = 0; i < mydata.length; i++ ){
data.addRow([new Date(mydata[i][0][0], mydata[i][0][1], mydata[i][0][2]), mydata[i][1], mydata[i][2]]);
//Get highest price
if (mydata[i][1] > maxval){
maxval = mydata[i][1];
}
}
var options = {
hAxis: {
title: 'Date',
viewWindow: {
min: new Date(mydata[0][0][0], mydata[0][0][1], mydata[0][0][2]),
max: new Date(mydata[mydata.length-1][0][0], mydata[mydata.length-1][0][1], mydata[mydata.length-1][0][2])
},
gridlines: {
count: -1,
units: {
days: {
format: ['MMM dd']
},
}
},
},
vAxis: {
title: 'Price',
minValue: 0,
maxValue: maxval
},
legend: 'none',
series: {
0: {
pointSize: 8,
dataOpacity: 0.6,
pointShape: 'diamond'
},
1: {
lineWidth: 2,
color: '#509C49',
pointSize: 0
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
最佳答案
尝试使用modules/(YOUR_MODULE)/views/Edit.php中的getHeaderScripts添加js文件。
function getHeaderScripts(VtigerCrm_Request $request) {
$headerScriptInstances = parent::getHeaderScripts($request);
$jsFileNames = array(
'libraries.jquery.multiplefileupload.jquery_MultiFile'
);
// Add your js path like i did for jquery_MultiFile
$jsScriptInstances = $this->checkAndConvertJsScripts($jsFileNames);
$headerScriptInstances = array_merge($headerScriptInstances, $jsScriptInstances);
return $headerScriptInstances;
}
关于javascript - 将Google图表添加到vtiger时出错，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36450796/