PHP+MySQL+Highcharts生成饼图
首先,我们建立了一个chart_pie表作为统计数据。
—
-表` chart_pie `结构
—
创建表不存在(` chart_pie `
` ID ` int(11)不为空auto_increment,
`标题` varchar(30)不为空,
`光伏` int(10)不为空,
主键(id)
)= MyISAM引擎默认的字符集utf8 auto_increment = 7;
—
数据` chart_pie `在记忆表
—
插入` chart_pie `(` ID `,`标题`,`光伏`)值
(1,百度,1239)
(2,'ogle ',998),
(3,搜索,342)
(4,冰,421)
(5,搜狗,259),
(6,其他,83);
PHP
在pie.php我们要生成数据的前端呼叫:
为查询= mysql_query(SELECT * FROM chart_pie );
而($行= mysql_fetch_array($查询)){
{ } =数组(数组元
$行{标题},intval($行{ 'pv})
);
}
数据json_encode美元($ ARR);
jQuery
$(函数(){())
$(# Highcharts)。Highcharts({
图:{
render:'chart_pie,
饼图与相关联的元素值
defaultseriestype:'pie,
将默认图表类型添加到饼图中。
plotbackgroundcolor:# FFC,
设置背景色图表区域
PlotShadow:真 / /设置阴影
},
标题:{
文本:搜索引擎统计数字/图表标题
},
学分:{
文本:
},
提示:{
格式化:(功能){ / /鼠标图像格式的消息提示框
返回+ this.point.name ++twodecimal(这个百分比)%;
}
},
plotoptions:{
{馅饼:
allowpointselect:真,
允许选择,单击所选扇区可以与显示分开。
光标:'pointer,
当鼠标指向扇形区域转为手型(单击)
/ / / showinlegend:真的,如果你想显示图例,可以设置为true
DataLabels:{
启用:正确,
设置可见的数据标签,显示与每个扇区对应的数据。
颜色:# 000000,
数据显示颜色
connectorcolor:# 999,
设置数据域扇区连接线颜色
风格:{
FontSize:'12px ' / /数据显示大小
},
格式化:(功能){ / /数据格式
返回+ this.point.name ++twodecimal(这个百分比)%;
/ /返回+ this.point.name + ':' +本。Y;
}
}
}
},
系列:{数据列
名称:搜查引擎,
数据:从PHP数据读取并解析为JSON的数据核心数据列
} }
});
});
此外,对城市数据格式,如果你想显示的百分比,你可以使用this.percentage。开发自动转换成整数百分比。如果要显示数据卷,请直接使用。
百分比代码如下所示:
格式化:(功能){ / /数据格式
返回+ this.point.name ++twodecimal(这个百分比)%;
}
实际的数据是这样的:
格式化:(功能){ / /数据格式
返回+ this.point.name +:+ Y这;
}
最后,我们必须保留两个十进制数。
功能twodecimal(x){ / / 2位小数
无功f_x parseFloat(x)=;
如果(isnan(f_x)){
警报('wrong参数);
返回false;
}
无功f_x = math.round(X 100)/ 100;
无功s_x = f_x.tostring();
无功pos_decimal = s_x.indexof(' ');
如果(pos_decimal<0){
pos_decimal = s_x.length;
s_x += '。;
}
而(s_x.length <= pos_decimal + 2){
s_x = '0';
}
返回s_x;
}
条形图、饼图、图等是相同的。
以上是本文的全部内容,希望大家能喜欢。