Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
0b59edac
Z
zui
项目概览
易企天创
/
zui
大约 1 年 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0b59edac
编写于
4月 30, 2015
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* change view/chart document, add more example.
上级
c87acf37
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
177 addition
and
36 deletion
+177
-36
docs/2/part/view-chart.html
docs/2/part/view-chart.html
+177
-36
未找到文件。
docs/2/part/view-chart.html
浏览文件 @
0b59edac
<style>
.text-middle
th
,
.text-middle
td
{
vertical-align
:
middle
;
}
</style>
<article>
<p>
ZUI中的图表视图使用
<a
href=
"http://www.chartjs.org/"
target=
"_blank"
>
Chart.js
</a>
实现。
</p>
<p>
目前提供曲线图和饼图的实现。
</p>
...
...
@@ -122,11 +128,28 @@ var myLineChart = $("#myLineChart").lineChart(data, options);</code></
legendTemplate :
"<
ul class='
<
%=name.toLowerCase()%
>
-legend'
><
% for (var i=0; i
<
datasets.length; i++){%
><
li
><
span style='background-color:
<
%=datasets[i].strokeColor%
>
'
><
/span
><
%if(datasets[i].label){%
><
%=datasets[i].label%
><
%}%
><
/li
><
%}%
><
/ul
>"
};
</code></pre>
<h4>
方法与事件
</h4>
<h5>
.getPointsAtEvent( event )
</h5>
<h5>
.update( )
</h5>
<h5>
.addData( valuesArray, label )
</h5>
<h5>
.removeData( index )
</h5>
<h4>
方法
</h4>
<p>
创建图表后得到的图表实例拥有一些有用的方法。
</p>
<h5>
.getPointsAtEvent(event)
</h5>
<p>
传入一个jQuery点击事件参数,则返回鼠标在图表上点击所在的水平方向刻度对应的点集合。
</p>
<pre><code>
$(
"
#myLineChart
"
).on(
"
click
"
, function(evt){
var activePoints = myLineChart.getPointsAtEvent(evt);
// activePoints 为一个数组,如果当前点击所在的位置没有对应的数据,则为空
});
</code></pre>
<h5>
.update()
</h5>
<p>
更新数据集,并重新绘制图表。
</p>
<pre><code>
// 更新第一个数据集的第三个数据值为50
myLineChart.datasets[0].points[2].value = 50;
// 调用update方法根据更新后的数据集重新绘制图表
myLineChart.update();
</code></pre>
<h5>
.addData(valuesArray, label)
</h5>
<p>
向图表数据集增加一组新的数据,并立即重回图表。
</p>
<pre><code>
// 向数据集添加一组新的数据
myLineChart.addData([40, 60],
"
十三月
"
);
</code></pre>
<h5>
.removeData()
</h5>
<p>
移除数据集中的第一组数据,并重绘图表,会应用动画效果。
</p>
<pre><code>
myLineChart.removeData();
</code></pre>
</article>
</section>
...
...
@@ -206,10 +229,69 @@ var myDoughnutChart = $("#myDoughnutChart").doughnutChart(data, {segme
legendTemplate :
"<
ul class='
<
%=name.toLowerCase()%
>
-legend'
><
% for (var i=0; i
<
segments.length; i++){%
><
li
><
span style='background-color:
<
%=segments[i].fillColor%
>
'
><
/span
><
%if(segments[i].label){%
><
%=segments[i].label%
><
%}%
><
/li
><
%}%
><
/ul
>"
}
</code></pre>
<h4>
方法与事件
</h4>
<h5>
.getSegmentsAtEvent( event )
</h5>
<h5>
.update( )
</h5>
<h5>
.addData( segmentData, index )
</h5>
<h5>
.removeData( index )
</h5>
<h5>
.getSegmentsAtEvent(event)
</h5>
<p>
传入一个鼠标点击事件参数,以数组的形式返回当前点击的扇形区域对应的数据。
</p>
<pre><code>
$(
"
#myPieChart
"
).on(
"
click
"
, function(evt){
var activePoints = myPieChart.getSegmentsAtEvent(evt);
// activePoints 为一个数组,如果当前点击所在的位置没有对应的数据,则为空
});
</code></pre>
<h5>
.update()
</h5>
<p>
更新数据集,并重新绘制图表。
</p>
<pre><code>
// 更新第一个数据集(默认只有一个数据集)的第二个数据值为50
myPieChart.segments[1].value = 10;
// 调用update方法根据更新后的数据集重新绘制图表
myPieChart.update();
</code></pre>
<h5>
.addData(segmentData, index)
</h5>
<p>
向图表数据集增加一组新的数据,并立即重回图表。
</p>
<pre><code>
myPieChart.addData({
value: 130,
color: "purple",
label: "紫队"
});
</code></pre>
<h5>
.removeData(index)
</h5>
<p>
移除指定索引位置的数据,如果不指定索引,则默认移除最后一个数据。
</p>
<pre><code>
myPieChart.removeData();
</code></pre>
<h5>
综合示例
</h5>
<div
class=
"example"
>
<div
class=
"row"
>
<div
class=
"col-xs-6"
>
<table
class=
"table table-bordered text-middle"
>
<tbody>
<tr><th>
getSegmentsAtEvent
</th><td
id=
"pieGetSegmentsAtEvent"
><span
class=
"text-muted"
><i
class=
"icon icon-info-sign"
></i>
点击图表来获取点击的数据
</span></td></tr>
<tr><th>
update
</th><td>
<div
class=
"input-group"
>
<span
class=
"input-group-addon"
>
更改第
</span>
<input
type=
"text"
id=
"updatePieNum"
name=
"updatePieNum"
class=
"form-control"
value=
"0"
>
<span
class=
"input-group-addon fix-border"
>
个数据值为
</span>
<input
type=
"text"
id=
"updatePieValue"
name=
"updatePieValue"
class=
"form-control"
value=
"100"
>
<span
class=
"input-group-btn"
><button
type=
"button"
id=
"updatePie"
class=
"btn btn-primary"
>
确定
</button></span>
</div>
</td></tr>
<tr><th>
addData
</th><td>
<div
class=
"input-group"
>
<span
class=
"input-group-addon"
>
增加值为
</span>
<input
type=
"text"
id=
"addPieValue"
name=
"addPieValue"
class=
"form-control"
value=
"50"
placeholder=
"value"
>
<span
class=
"input-group-addon fix-border"
>
标题为
</span>
<input
type=
"text"
id=
"addPieLabel"
name=
"addPieLabel"
class=
"form-control"
value=
"新队"
placeholder=
"label"
>
<span
class=
"input-group-btn"
><button
type=
"button"
id=
"addPie"
class=
"btn btn-primary"
>
确定
</button></span>
</div>
</td></tr>
<tr><th>
update
</th><td>
<div
class=
"input-group"
>
<span
class=
"input-group-addon"
>
移除第
</span>
<input
type=
"text"
id=
"removePieIndex"
name=
"removePieIndex"
class=
"form-control"
placeholder=
"默认最后一个"
>
<span
class=
"input-group-addon fix-border"
>
个数据
</span>
<span
class=
"input-group-btn"
><button
type=
"button"
id=
"removePieData"
class=
"btn btn-primary"
>
确定
</button></span>
</div>
</td></tr>
</tbody>
</table>
</div>
<div
class=
"col-xs-3 text-center"
><canvas
id=
"myPieChart2"
width=
"200"
height=
"200"
></canvas></div>
<div
class=
"col-xs-3 text-center"
><canvas
id=
"myDoughnutChart2"
width=
"200"
height=
"200"
></canvas></div>
</div>
</div>
</article>
</article>
</section>
...
...
@@ -245,34 +327,93 @@ function afterPageLoad() {
};
var
myLineChart
=
$
(
"
#myLineChart
"
).
lineChart
(
data
,
{
bezierCurve
:
true
,
responsive
:
true
});
data
=
[
{
value
:
150
,
color
:
"
blue
"
,
// 使用颜色名称
label
:
"
蓝队
"
},
{
value
:
250
,
color
:
"
#F7464A
"
,
// 自定义颜色
// highlight: "#FF5A5E", // 自定义高亮颜色
label
:
"
红队
"
},
{
value
:
50
,
color
:
'
green
'
,
label
:
"
绿队
"
},
{
// 不指定color值,使用随机颜色
//
value
:
100
,
label
:
"
随机颜色队
"
}];
var
data2
=
[
{
value
:
150
,
color
:
"
blue
"
,
// 使用颜色名称
label
:
"
蓝队
"
},
{
value
:
250
,
color
:
"
#F7464A
"
,
// 自定义颜色
// highlight: "#FF5A5E", // 自定义高亮颜色
label
:
"
红队
"
},
{
value
:
50
,
color
:
'
green
'
,
label
:
"
绿队
"
},
{
// 不指定color值,使用随机颜色
//
value
:
100
,
label
:
"
随机颜色队
"
}
];
// 创建饼图
var
myPieChart
=
$
(
"
#myPieChart
"
).
pieChart
(
data
);
var
myPieChart
=
$
(
"
#myPieChart
"
).
pieChart
(
data2
);
// 创建环形饼图
var
myDoughnutChart
=
$
(
"
#myDoughnutChart
"
).
doughnutChart
(
data
,
{
segmentShowStroke
:
false
});
var
myDoughnutChart
=
$
(
"
#myDoughnutChart
"
).
doughnutChart
(
data2
,
{
segmentShowStroke
:
false
});
// 综合示例
var
myPieChart2
=
$
(
"
#myPieChart2
"
).
pieChart
(
data2
);
var
myDoughnutChart2
=
$
(
"
#myDoughnutChart2
"
).
doughnutChart
(
data2
,
{
segmentShowStroke
:
false
});
$
(
"
#myPieChart2
"
).
on
(
'
click
'
,
function
(
e
){
var
point
=
myPieChart2
.
getSegmentsAtEvent
(
e
)[
0
];
$
(
'
#pieGetSegmentsAtEvent
'
).
html
(
point
?
'
你点击了 <strong><i class="icon text-muted icon-circle"></i> 饼图 </strong>的 <span style="color: #fff; display: inline-block; padding: 0 5px; background-color:
'
+
point
.
fillColor
+
'
">
'
+
point
.
label
+
'
</span>,当前值为 <strong>
'
+
point
.
value
+
'
</strong>
'
:
'
你点击了空白地方。
'
);
});
$
(
"
#myDoughnutChart2
"
).
on
(
'
click
'
,
function
(
e
){
var
point
=
myDoughnutChart2
.
getSegmentsAtEvent
(
e
)[
0
];
$
(
'
#pieGetSegmentsAtEvent
'
).
html
(
point
?
'
你点击了 <strong><i class="icon text-muted icon-circle"></i> 环图 </strong>的 <strong style="color: #fff; display: inline-block; padding: 0 5px; background-color:
'
+
point
.
fillColor
+
'
">
'
+
point
.
label
+
'
</strong>,当前值为 <strong>
'
+
point
.
value
+
'
</strong>
'
:
'
你点击了空白地方。
'
);
});
$
(
'
#updatePie
'
).
on
(
'
click
'
,
function
(){
var
num
=
parseInt
(
$
(
'
#updatePieNum
'
).
val
());
var
val
=
parseInt
(
$
(
'
#updatePieValue
'
).
val
());
if
(
!
isNaN
(
num
)
&&
!
isNaN
(
val
))
{
myPieChart2
.
segments
[
num
].
value
=
val
;
myPieChart2
.
update
();
myDoughnutChart2
.
segments
[
num
].
value
=
val
;
myDoughnutChart2
.
update
();
var
next
=
Math
.
min
(
80
,
Math
.
round
(
Math
.
random
()
*
500
));
var
nextIndex
=
Math
.
floor
(
Math
.
random
()
*
myPieChart2
.
segments
.
length
);
$
(
'
#updatePieValue
'
).
val
(
next
);
$
(
'
#updatePieNum
'
).
val
(
nextIndex
);
}
else
{
$
.
zui
.
messager
.
warning
(
'
请输入有效的数据。
'
,
{
placement
:
'
center
'
});
}
});
$
(
'
#addPie
'
).
click
(
function
(){
var
val
=
parseInt
(
$
(
'
#addPieValue
'
).
val
());
var
label
=
$
(
'
#addPieLabel
'
).
val
();
if
(
!
isNaN
(
val
)
&&
label
)
{
var
dt
=
{
value
:
val
,
label
:
label
};
myPieChart2
.
addData
(
dt
);
myDoughnutChart2
.
addData
(
dt
);
var
next
=
Math
.
min
(
80
,
Math
.
round
(
Math
.
random
()
*
500
));
$
(
'
#addPieValue
'
).
val
(
next
);
$
(
'
#addPieLabel
'
).
val
(
'
幸运
'
+
next
);
}
else
{
$
.
zui
.
messager
.
warning
(
'
请输入有效的数据。
'
,
{
placement
:
'
center
'
});
}
});
$
(
'
#removePieData
'
).
click
(
function
(){
var
idx
=
parseInt
(
$
(
'
#removePieIndex
'
).
val
());
if
(
!
isNaN
(
idx
)
||
!
idx
)
{
idx
=
undefined
;
myPieChart2
.
removeData
(
idx
);
myDoughnutChart2
.
removeData
(
idx
);
var
nextIndex
=
Math
.
floor
(
Math
.
random
()
*
myPieChart2
.
segments
.
length
);
$
(
'
#removePieIndex
'
).
val
(
nextIndex
);
}
else
{
$
.
zui
.
messager
.
warning
(
'
请输入有效的数据。
'
,
{
placement
:
'
center
'
});
}
});
}
</script>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录