在我的spring mvc应用程序中从jsp调用外部js中的jquery函数

Calling jquery function in external js from jsp in my spring mvc app

本文关键字：外部 调用 js 中的 函数 jquery jsp spring 我的 mvc 应用程序      更新时间：2023-09-26

我想链接我的jquery(jqplot)函数在外部js文件到我的jsp，但图表是不生成当我这样做。

这个问题是因为我在${finalscorepercent}中通过JSTL动态获取数据而产生的吗

我的jquery代码在external.js

$.jqplot.config.enablePlugins = true;
var d1 = ${finalScorepercent}
var d2 = 100 - ${finalScorepercent}
var data = [
    ['FinalScore', d1],
    ['f', d2],
];
var plot4 = $.jqplot('finalScorepercent', [data], {
    seriesDefaults: {
        // make this a donut chart.
        renderer: $.jqplot.DonutRenderer,
        rendererOptions: {
            fillToZero: true,
            // Donut's can be cut into slices like pies.
            sliceMargin: 3,
            // Pies and donuts can start at any arbitrary angle.
            startAngle: -90,
            /*  showDataLabels: true,  */
            // By default, data labels show the percentage of the donut/pie.
            // You can show the data 'value' or data 'label' instead.
            /* dataLabels: 'label', */
            // "totalLabel=true" uses the centre of the donut for the total amount
            totalLabel: true,
            showDataLabels: true,
            dataLabels: 'value'
        }
    },
    grid: {
        background: 'transparent',
        borderColor: 'transparent',
        shadow: false,
        drawGridLines: false,
        gridLineColor: 'transparent',
        borderWidth: '0'
    },
    seriesColors: [
        '#57c1b4', '#bd66a9',
        '#abb3b6'
    ],
    negativeSeriesColors: ["#498991", "#C08840", "#9F9274"],
    highlighter: {
        show: true,
        useAxesFormatters: false,
        tooltipAxes: 'xy',
        formatString: '%s:%s'
    }

});
这是我的JSP代码

<div id="finalScorepercent" style="height: 200px; width: 200px;">
<script type="text/javascript" src="<c:url value="/views/js/external.js">">                                     
</script>
</div>

${finalscorepercent}是一个JSTL语句，它不会在JavaScript文件中呈现为Number，因此您的代码不起作用。

你可以在模板文件中创建一个JavaScript变量，可以在external.js，

中使用

<div id="finalScorepercent" style="height: 200px; width: 200px;">
<div>
<script>    
    window.finalScorepercent = ${finalScorepercent};
</script>
<script src="<c:url value="/views/js/external.js">">                                        
</script>

现在在external.js文件中，您可以使用window.finalScorepercent代替${finalScorepercent} 

var d1 = window.finalScorepercent;
var d2 = 100 - window.finalScorepercent;
相关文章：