javascript - 将 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

尝试使用 getHeaderScripts 添加 js 文件在modules/(YOUR_MODULE)/views/Edit.php中。

    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;
    }