Question

作为groovy / grails中的菜鸟，我想学习如何制作或使用图表插件。我试过zing chart，试过这个例子，但结果没什么，有时我有图表的区域而没有别的。

所以要显示我使用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>

当我使用它时，没有任何东西，该区域只是消失

for include：

 <zing:include/>

它的下划线是黄色的，就像与zing图表有关的所有东西一样，当我将它悬停时，它表示zing是未知的，那么我该怎么办？

请帮忙。

当你解释时，只知道我不是java developper。

提前谢谢。

Answer 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控制器

如何在grails中制作图表？

1 个答案: