数据可视化可以选用很多插件但是动态的插件在数据很多很多的情况下会很耗费计算机性能,如果先在php上边使用gd绘制生成一个png图片在当需要详细了解的时候在进行跳转这样就会大大降低电脑的性能
首先要熟悉gd库的基本使用可以基于这样绘画出来基本的数据库模型数据图形跟数据的或者折线图中的点的位置是以像素为基础跟html一样定位的首先是我们要摸清楚数据的位置定位然后计算好数据坐在的点的位置接下来使用基本的gd函数进行绘制,绘制的时候要注意循环的逻辑,代码的规范,使用的东西 以下是最近使用函数绘制折线统计图的实例属于动态获取数据绘制多条统计图
Class
ChartController
extends
Controller
{
public function
building
()
{
$x_value
= [
[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
21
,
26
]
,
[
11
,
12
,
13
,
14
,
15
,
16
,
17
,
18
]
]
;
$y_value
= [
[
9
,
8
,
7
,
6
,
5
,
4
,
3
,
1
,
8
,
8
]
,
[
11
,
12
,
13
,
14
,
15
,
16
,
17
,
18
]
]
;
$receive_x
= []
;
$receive_y
= []
;
foreach
(
$x_value
as
$k
=>
$v
){
$receive_x
= array_merge(
$x_value
[
$k
]
,
$receive_x
)
;
$max_x
= max(
$receive_x
)
;
$min_x
= min(
$receive_x
)
;
}
foreach
(
$x_value
as
$k
=>
$v
){
$receive_y
= array_merge(
$y_value
[
$k
]
,
$receive_y
)
;
$max_y
= max(
$receive_y
)
;
$min_y
= min(
$receive_y
)
;
}
$range_y
=
$max_y
-
$min_y
;
//计算y轴极差
$range_x
=
$max_x
-
$min_x
;
//计算x轴极差
$array_y_length
= count(
$y_value
)
;
$img
= imagecreate(
430
,
330
)
;
$file
=
"@storage/picture/test"
;
$r
=[hexdec(
"fd"
)
,
81
,
hexdec(
"cc"
)
,
88
,
82
,
hexdec(
"fd"
)
,
73
,
hexdec(
"bd"
)
,
hexdec(
"6e"
)
,
54
,
hexdec(
"c4"
)]
;
$g
=[hexdec(
"a6"
)
,
hexdec(
"ca"
)
,
hexdec(
"a8"
)
,
hexdec(
"cc"
)
,
hexdec(
"a0"
)
,
hexdec(
"db"
)
,
hexdec(
"5b"
)
,
hexdec(
"a2"
)
,
70
,
65
,
hexdec(
"cc"
)]
;
$b
=[hexdec(
"7e"
)
,
hexdec(
"cc"
)
,
hexdec(
"ba"
)
,
81
,
hexdec(
"c5"
)
,
hexdec(
"7e"
)
,
hexdec(
"a1"
)
,
hexdec(
"9a"
)
,
74
,
70
,
hexdec(
"d3"
)]
;
$green
= imagecolorallocate(
$img
,
213
,
235
,
213
)
;
//图画的背景颜色是有作用的
$black
= imagecolorallocate(
$img
,
0
,
0
,
0
)
;
$red
= imagecolorallocate(
$img
,
255
,
0
,
0
)
;
$position_x
=
30
;
//获取在x轴的位置
$position_y
=
295
;
//获取在y轴上的位置
$average_y
= ceil((
$range_y
) /
10
)
;
//每一个在y轴上面分配到的数据
$average_x
= ceil((
$range_x
) /
10
)
;
//每一个在x轴上边分配到的数据
$top_y
=
$max_y
+
$average_y
;
//以上两行属于获取原点的位置
imageline(
$img
,
30
,
300
,
400
,
300
,
$black
)
;
//坐标轴x轴
imageline(
$img
,
30
,
300
,
30
,
20
,
$black
)
;
//坐标轴y轴
$ydata
=
$min_y
;
$xdata
=
$min_x
;
for
(
$i
=
0
;
$i
<
10
;
$i
++) {
imagestring(
$img
,
13
,
15
,
$position_y
,
$ydata
,
$black
)
;
$position_y
=
$position_y
-
30
;
$useydata
[] =
$ydata
;
$ydata
=
$ydata
+
$average_y
;
}
//y轴上边显示的数据
for
(
$i
=
0
;
$i
<
10
;
$i
++) {
imagestring(
$img
,
13
,
$position_x
,
300
,
$xdata
,
$black
)
;
$position_x
=
$position_x
+
37
;
$usexdata
[] =
$xdata
;
$xdata
=
$xdata
+
$average_x
;
}
//x轴上边显示的数据
for
(
$s
=
0
;
$s
<
$array_y_length
;
$s
++) {
$point_x
=[]
;
//没有重置point_x
$point_y
=[]
;
/**
*这边要加一个判断在数据的范围内增加一个量级使得所取得的数据大于最大值
*/
$length_x
= count(
$x_value
[
$s
])
;
/**
* 获取数据点的思路 把像素分割成点 这个数值占总数之乘上x或y总的像素值
* $pixel = 数值 / 最大刻度 * 该轴最大的像素值; //分割像素
*/
$color
= imagecolorallocate(
$img
,
$r
[
$s
]
,
$g
[
$s
]
,
$b
[
$s
])
;
foreach
(
$x_value
[
$s
]
as
$x
) {
$pixel_x
=
$x
/(max(
$usexdata
)-
$min_x
) *
370
+
30
;
$point_x
[] =
$pixel_x
;
}
//点在x轴上边分配到的像素
foreach
(
$y_value
[
$s
]
as
$y
) {
$pixel_y
= -(
$y
/ (max(
$useydata
)-
$min_y
) *
240
)+
300
;
$point_y
[] =
$pixel_y
;
}
for
(
$l
=
0
;
$l
<
$length_x
;
$l
++) {
$a
=
$l
+
1
;
$b
=
$a
<
$length_x
?
$a
:
$length_x
-
1
;
//laravel框架需要这样使用三目运算需要找一个变量接受运算之后的结果
imagefilledellipse(
$img
,
$point_x
[
$l
]
,
$point_y
[
$l
]
,
5
,
5
,
$red
)
;
imageline(
$img
,
$point_x
[
$l
]
,
$point_y
[
$l
]
,
$point_x
[
$b
]
,
$point_y
[
$b
]
,
$color
)
;
}
//点在y轴上分配到的像素
}
imagepng(
$img
)
;
imagedestroy(
$img
)
;
return
response(
200
)
->
header
(
'content-type'
,
'image/jpeg'
)
;
}
}
代码是这样的会出来的结果是一个如下的图片
我使用的是laravel框架他的header声明方式以代码中的例子为准不是直接的header的声明方式,接下来我要思考的的事生成的图片如何放置在一个文件中,等待下一步更新.