README

jQuery Widget Polygonal Graph 是一个基于部件工厂的jQuery小部件。它使用HTML5的canvas标签在圆上绘制多边形图形。

如果您有一组包含在范围内的数据并且想要表示它，您可以使用 PolygonalGraph 小部件！每个数据点在圆上表示一个点。如果数据很小，它将靠近中心，反之，如果数据接近最大值，它将靠近圆周。这种图形非常直观，例如，表示和比较足球运动员（攻击、防守、速度等）或RPG角色（生命、魔法点、敏捷性等）的特征等...

###1) 要求此小部件基于jQuery Widget Factory，因此您必须包含 jQuery 和 jQuery UI 库

<script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.11.0.min.js"></script>

在这种情况下，库位于名为 "jQuery" 的文件夹中。

###2) 包含小部件

<script type="text/javascript" src="polygonalGraphWidget.js"></script>

###3) 开始使用在body中包含canvas

<canvas id="myCanvas" width="400" height="400"></canvas>

然后您可以使用您的部件

<script>
    var labels = new Array('ATT', 'DEF', 'SPD', 'ENE', 'MEN');  // labels that will be displayed
    var data = new Array(90, 74, 73, 64, 66);                   // the data you want to show in the graphic
    var myVar = $("#myCanvas").polygonalGraphWidget(
            {
                labels: labels,
                data: data
            }
    );
</script>

在上面的脚本中，我们简单地创建两个数组，labels 和 data，它们具有相同数量的元素。它们必须包含至少三个元素。 data 将包含介于 0 和 max_val（默认为99）之间的数字。然后我们将这些数组传递给一个名为 "polygonalGraphWidget" 的部件，该部件锚定到id为 myCanvas 的canvas元素。这两个参数是必需的！

data 也可以是一个数组的数组。每个数组必须具有与 labels 相同数量的元素。

###3) 设置除了 labels 和 data 之外，您还可以添加其他可选参数来定制小部件。默认情况下，它们是

- max_val: 99                                            // max value reference
- textFont: "bold 16px Times New Roman"                  // font of labels
- textColor: "#000"                                      // color of lables
- circleLineWidth: 5                                     // circle line width in px
- circleRadius: 150                                      // circle radius in px
- circleLineColor: "#333"                                // circle line color
- circleBackgroundColor: "rgba(100, 161, 265, 1)"        // circle background color
- graph_colors: [                                        // graph line colors (they will be cycled)
    "rgba(255, 0, 0, 0.6)"
    "rgba(0, 255, 0, 0.6)"
    "rgba(0, 0, 255, 0.6)"
    ]
- phase_start: (Math.PI / 2),                            // initial phase in radians (it establishes where the first point will be placed on the circumference)
- margin: 15                                             // margin in px of lables from circumference
- grid: true                                             // show grid (true=yes, false=no)

###完整示例

<!DOCTYPE>
<html>
    <head>
        <title>Polygonal Graph Widget</title>
        <script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui-1.11.0.min.js"></script>
        <script type="text/javascript" src="polygonalGraphWidget.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="400"></canvas>
        <script>
            var labels = new Array('ATT', 'DEF', 'SPD', 'ENE', 'MEN');
            var data = new Array(90, 74, 73, 64, 66);
            var myVar = $("#myCanvas").polygonalGraphWidget(
                    {
                        labels: labels,
                        data: data
                    }
            );
        </script>
    </body>
</html>

revilkent / jquery-widget-polygonal-graph

维护者

详情

README