将 google 个图表添加到 vtiger 时出错

Question

Vtiger 有自己的 js 文件，所以我认为可能存在一些冲突。无论如何，这是我在浏览器控制台中得到的：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

Error: Google Charts loader.js can only be loaded once.

后来可能是因为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);
}

Answer 1

尝试在 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;
    }

将 google 个图表添加到 vtiger 时出错

Error while adding google charts to vtiger

javascript

jquery

google-visualization

vtiger