highCharts 说明
通过阅读highCharts API文档，我们知道highCharts的基本结构是：
var chart = new Highcharts.Chart({
chart: {…}
colors: [{…}]
credits: {…}
exporting: {…}
global: {…}
labels: {…}
lang: {…}
legend: {…}
loading: {…}
navigation: {…}
pane: {…}
plotOptions: {…}
series: [{…}]
subtitle: {…}
title: {…}
tooltip: {…}
xAxis: {…}
yAxis: {…}
});
其中只有几个是必须配置的属性，其他无特殊要求默认即可。所以，HighCharts开发，只需要了解每个属性的含义，并有选择的配置需要的效果既可。
使用起来可以分为以下三步
第一 首先
下载highCharts 要用的js包 官网地址为 http://www.highcharts.com/
因为要用到 jquery方法
下载jquery.min.js包 版本要在1.7以上
把下载后的js引入到项目或者特定的页面中
格式如下
下面三个是必须要引入的
<script src="../js/jquery/jquery-1.8.2.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/modules/exporting.js"></script>
第二 导入js内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HighCharts</title>
// 需要引入的 js包
//jquery
<script src="../js/jquery/jquery-1.8.2.min.js"></script>
//highcharts主 js
<script src="../js/highcharts.js"></script>
// 导出图表功能
<script src="../js/modules/exporting.js"></script>
</head>
<f:view>
<body>
<h:form styleClass="form" id="form1">
<div class="title">当前位置->线图例</div>
<h:commandButton styleClass="btn" id="btn_back" action="#{testTongjiMBean.back}" value="返回"></h:commandButton><br/>
标题:<h:inputText id="titless" value="#{testTongjiMBean.columnHighcharts.title}"></h:inputText><br/>
x下标:<h:inputText id="xAxisss" value="#{testTongjiMBean.columnHighcharts.xAxis}"></h:inputText><br/>
y下标:<h:inputText id="yTitless" value="#{testTongjiMBean.columnHighcharts.ytitle}"></h:inputText><br/>
数据一:<h:inputText id="serie1" value="#{testTongjiMBean.columnHighcharts.series[0]}"></h:inputText><br/>
数据二:<h:inputText id="serie2" value="#{testTongjiMBean.columnHighcharts.series[1]}"></h:inputText><br/>
<div id="container" style="min-width: 800px; height: 400px">1111</div>
</h:form>
</body>
<script type="text/javascript">
//把 字符串解析成数
var bb= $("#form1\\:xAxisss").val().split(",")
var j1=0;
//第一条数据
var a1=$("#form1\\:serie1").val().split(",")
// 把字符串数组 a1 转成成 josn 对象 obj
var txt1 = '[' ; //josn 对象
for (var i in a1)
{
txt1=txt1+'{"name":"'+bb[j1]+'",y:'+Number(a1[i])+ '},' //这里如果 name 是鼠标移动到该数据图例上显示的 说明，y 为值
j1=j1+1;
}
txt1= txt1.substring(0,txt1.length-1);
txt1=txt1+']';
var obj1 = eval ("(" + txt1 + ")");
//第二条数据 如果有第二条数据的话
var j2=0;
var a2=$("#form1\\:serie2").val().split(",")
// 把字符串数组 a1 转成成 josn 对象 obj
var txt2 = '[' ; //josn 对象
for (var i2 in a2)
{
txt2=txt2+'{"name":"'+bb[j2]+'",y:'+Number(a2[i2])+ '},' //这里如果 name付别的值的话 鼠标移动到 图上会显示出该值 而不是x下标
j2=j2+1;
}
txt2= txt2.substring(0,txt2.length-1);
txt2=txt2+']';
var obj2 = eval ("(" + txt2 + ")");
$(document).ready(function() {
$('#container').highcharts(
{
chart : {
type : 'column' /*柱状图的属性 //图表类型 line, spline, area, areaspline, column, bar, pie , column ,scatter */
},
title : {
text : $("#form1\\:titless").val() /* 标题 */
},
xAxis : { /*x坐标轴 */
categories : $("#form1\\:xAxisss").val().split(",")
},
yAxis : {
title : {
text : $("#form1\\:yTitless").val() /*y坐标轴 */
}
},
series : [ { /*同一种数据 所有数据 放在一个 组中*/
name: '生产',
color:'#ff0000', //改变但个柱体的颜色
data: obj1
}, {
color:'#00ff00',
name: '销售',
data: obj2
} ]
});
});
</script>
</f:view>
</html>
第三 处理台
管理bean
package cn.wiztek.mbean;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TestTongjiMBean extends AbstractMBean{
//其他图
public String column(){
//指定数据
this.columnHighcharts.title="标题";
//x轴 下标 必须以下面的方式拼接 并且 列数要跟series 数据列数相同
this.columnHighcharts.xAxis="黄金国际,会渴望元,东城摩尔,翡翠东郡,会客望远";
// y柱图例说明
this.columnHighcharts.ytitle="项目金额单位 元";
//数据列 格式也得是拼接成 "2,6,8,1,2" 方式
this.columnHighcharts.series=new ArrayList<String>();
this.columnHighcharts.series.add(0, "2,6,8,1,2");
this.columnHighcharts.series.add(1, "4,2,5,6,1");
return column;
}
}
Highcharts 包装类
package cn.wiztek.TongjiWapBean;
import java.util.ArrayList;
import java.util.List;
/**
* 柱状图 column
* @author lcs
*
*/
public class ColumnHighcharts {
public String chart="column";//默认图表类型line, spline, area, areaspline,column, bar, pie , scatter 默认值 为 column
public String title;//主标题
public String tooltip;//副标题
public String xAxis;// 配置x轴下标 格式为 "黄金国际,会渴望元,东城摩尔,翡翠东郡,会客望远" 页面中会解析成字符串数组
public String ytitle;// y坐标轴说明 格式为 普通字符窜
//public Object legend=new Object(); //图例选项
public List<String> series=new ArrayList<String>(); // 配置数据列选项
public String getChart() {
return chart;
}
public void setChart(String chart) {
this.chart = chart;
}
public String getxAxis() {
return xAxis;
}
public void setxAxis(String xAxis) {
this.xAxis = xAxis;
}
public String getYtitle() {
return ytitle;
}
public void setYtitle(String ytitle) {
this.ytitle = ytitle;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getTooltip() {
return tooltip;
}
public void setTooltip(String tooltip) {
this.tooltip = tooltip;
}
public List<String> getSeries() {
return series;
}
public void setSeries(List<String> series) {
this.series = series;
}
}
第四 相关网站
http://www.iteye.com/news/12109-highcharts-charting-api
http://www.highcharts.me/demo/index.php?p=40
http://www.52wulian.org/tag/highcharts3-0/
http://www.highcharts.me/demo/index.php
扫一扫
3468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
