如何在grails中制作图表？答案

【问题标题】：how to make a chart in grails?如何在grails中制作图表？
【发布时间】：2014-09-03 16:09:46
【问题描述】：

作为 groovy/grails 的新手，我想学习如何制作或使用图表插件。我尝试了 zing 图表，尝试了示例，但没有任何结果，有时我只有图表的区域，没有别的。

所以要显示我使用 zing 的图表：

<zing:chart type="area" width="700" height="350" container="acceptToConvertChart" data="${data}" xLabels="${labels}" effect="4" />

对于脚本：

<script>    def labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    def data = [
              'Visitors': [100, 300, 200, 240, 500, 100, 80],
              'Purchases': [30, 50, 12, 20, 55, 20, 10]
            ]</script>

当我使用它时，什么都没有发生，该区域消失了

包括：

 <zing:include/>

它像所有与 zing 图表相关的东西一样用黄色下划线，当我悬停它时，它说 zing 是未知的，那么我应该怎么做？

请帮忙。

当你解释的时候，就知道我不是java开发者。

提前谢谢你。

【问题讨论】：

标签： grails groovy charts grails-plugin

【解决方案1】：

您的 HTML 中需要这样的内容：

<head>
    <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
    <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE =["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];   </script>
</head>
<body>
    Here is your ZingChart:
    <div id='myChart'></div>
</body>

类似这样的javascript：

zingchart.THEME = "classic";
var myConfig = 
    {
        "type": "area",
        "background-color": "#fff",
        "stacked": false,
        "title": {
            "text": "Visitors & Sales",
            "background-color": "#fff",
            "font-color": "#05636c",
            "adjust-layout":true
            },
        "tooltip": {
            "visible": false
        },
        "plot": {
            "aspect": "stepped",
            "line-width": "1px",
            "marker": {
                "visible": false
            },
            "hover-state": {
                "visible": false
            },
            "shadow": false
        },
        "plotarea": {
            "margin": "dynamic"
        },
        "scale-x": {
            "values": [
               "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
            ],
            "line-color": "#000",
            "line-width": "1px",
            "guide": {
                "visible": false
            },
            "tick": {
                "line-color": "#000",
                "line-width": "1px"
            },
            "label": {
                "text": "Days of the Week",
                "font-size": "14px",
                "font-family": "helvetica",
                "font-weight": "normal",
                "offset-y": "5%",
                "font-color":"#05636c"
            },
            "item": {
                "font-color": "#05636c",
                "font-weight": "normal",
                "font-family": "helvetica",
                "font-size": "12px",
                "offset-y": "3%"
            }
        },
        "scale-y": {
            "values": "0:600:50",
            "line-color": "#000",
            "line-width": "1px",
            "tick": {
                "line-color": "#000",
                "line-width": "1px"
            },
            "label": {
                "text": "Volume",
                "font-size": "14px",
                "font-family": "helvetica",
                "font-weight": "normal",
                "font-color":"#05636c"
            },
            "item": {
                "font-color": "#05636c",
                "font-weight": "normal",
                "font-family": "helvetica",
                "font-size": "12px",
                "offset-x": "-5%"
            },
            "guide": {
                "visible": false
            }
        },
        "crosshair-x": {
            "line-color": "#ffffff",
            "marker": {
                "visible": false
            },
            "plot-label": {
                "text": "<strong>%v</strong> %t",
                "shadow": 0,
                "font-size": "12px",
                "font-color": "#05636c",
                "font-family": "helvetica",
                "border-width": "1px",
                "border-color": "#05636c",
                "background-color": "#ffffff",
                "text-align": "center"
            },
            "scale-label": {
                "font-size": "12px",
                "font-color": "#000000",
                "font-family": "helvetica",
                "background-color": "#ffffff",
                "offset-y": "3%"
            }
        },
        "series": [
            {
                "values": [
                    30, 50, 12, 20, 55, 20, 10
                ]
            },
            {
                "values": [
                  100, 300, 200, 240, 500, 100, 80]
            }
        ]
    };

zingchart.render({ 
  id : 'myChart', 
  data : myConfig, 
  height: 300, 
  width: 500 
});

请看看这个working example

请注意，您可能需要填充该部分 “价值观”：[ 30, 50, 12, 20, 55, 20, 10 ] 您的实际值来自您的 grails 控制器

【讨论】：

您能否在答案中添加更多详细信息？
如果您快速浏览一下 javascript 示例中的 zingchart homepage，您会发现 zingchart 只需要 4 件事：1) 直接访问或远程链接 (CDN) 到 zingchart.js库，2) 在您的 HTML（或同样在您的 JSP）页面中对该库的引用 3) 图表元素（由唯一 id 标识）和 4) 脚本部分，其中包括您的 zingchart 所需的配置（格式等.) 以及要在图表中显示的数据。一旦硬编码的 JSP 在 Grails 中运行，将数据移动到控制器中。