改造matrix_admin模版后台——图表（四）

一、小图表

这里使用了一个插件jquery.peity.js，（a simple <svg> mini pie），Chrome, Firefox, IE9+, Opera, Safari。

到官网上面下载了最新的一个版本，不出意外的话，肯定有许多地方需要修改。果然，复制过来是错误的。

经过一番折腾后发现，在默认设置中需要加个熟悉fill，还有就是样式做些微调

下面是原来的代码：

$.fn.peity.defaults.line = {
                strokeWidth: 1,
                delimeter: ",",
                height: 24,
                max: null,
                min: 0,
                width: 50
            };
            $.fn.peity.defaults.bar = {
                delimeter: ",",
                height: 24,
                max: null,
                min: 0,
                width: 50
            };

<div class="left peity_bar_neutral"><span><span style="display: none;">2,4,9,7,12,10,12</span>
              <canvas width="50" height="24"></canvas>
              </span>+10%</div>
            <div class="right"> <strong>15598</strong> Visits </div>

 

下面是修改后的代码：

$.fn.peity.defaults.line = {
                    delimiter: ",",
                    fill: "#c6d9fd",
                    height: 24,
                    max: null,
                    min: 0,
                    stroke: "#4d89f9",
                    strokeWidth: 1,
                    width: 50
                };
                $.fn.peity.defaults.bar = {
                    delimiter: ",",
                    fill: ["#4d89f9"],
                    height: 24,
                    max: null,
                    min: 0,
                    padding: 0.1,
                    width: 50
                };

<div class="left peity_bar_good">
                                            <span>
                                                    <span style="display: none;">12,6,9,23,14,10,13</span>
                                                    <canvas width="50" height="24"></canvas>
                                            </span>
                                            <div>+30%</div>
                                    </div>

html中就<div>+30%</div>给数字外面包了层div