jQuery图表示例来处理动态值

jquery chart example to work with dynamic values

本文关键字：处理 动态 表示 jQuery      更新时间：2023-09-26

我想使用这个jqchart bt我不知道如何从我的servlet将值传递给这个函数，而servlet又会从请求或会话接收值。谁能告诉我如何使这个函数具有动态值？提前感谢。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML5 Chart jQuery Plugin - Multiple Axes </title>
        <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
        <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
        <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
        <script lang="javascript" type="text/javascript">
            $(document).ready(function () {
                $('#jqChart').jqChart({
                    title: { text: 'Multiple Axes' },
                    axes: [
                             {
                                 name: 'y1',
                                 location: 'left'
                             },
                             {
                                 name: 'y2',
                                 location: 'right',
                                 strokeStyle: '#FCB441',
                                 majorGridLines: { strokeStyle: '#FCB441' },
                                 majorTickMarks: { strokeStyle: '#FCB441' }
                             }
                          ],
                    series: [
                                {
                                    type: 'column',
                                    axisY: 'y1',
                                    data: [['a', 1], ['b', 4], ['c', 3], ['d', 5], ['e', 2], ['f', 1]]
                                },
                                {
                                    type: 'line',
                                    axisY: 'y2',
                                    data: [['a', 40], ['b', 60], ['c', 62], ['d', 52], ['e', 70], ['f', 75]]
                                }
                            ]
                });
            });
        </script>
    </head>
    <body>
        <div>
            <div id="jqChart" style="width: 500px; height: 300px;" />
        </div>
    </body>
    </html>

你可以让你的html文件成为一个jsp页面或一个标签，javascript函数随后被动态呈现。

在 servlet java 文件中准备数据，如下所示：

String myseriesData1 = "['a', 1], ['b', 4], ['c', 3], ['d', 5], ['e', 2], ['f', 1]";
String myseriesData2 = "['a', 40], ['b', 60], ['c', 62], ['d', 52], ['e', 70], ['f', 75]";

在 servlet 中渲染 jsp，并确保"data"部分如下所示：

...
series: [
    {type: 'column',axisY: 'y1',data: [${myseriesData1}]},
    {type: 'line',axisY: 'y2',data: [${myseriesData2}]}]});
相关文章：