hchart--views
2017-04-20 本文已影响0人
amazing_bing
动态设置图表，如下:
$(function () {
var chartLine = new Highcharts.Chart({
chart: {
type: 'line',
<em><span style="color:#ff0000;">renderTo: 'container2'</span></em>
},
title: {
text: '上月已还款金额与本月账单金额对比结果'
},
subtitle: {
text: ''
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '单位 (元)'
}
},
tooltip: {
enabled: false,
formatter: function () {
return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y + '°C';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: '上月还款金额',
data: []
}, {
name: '本月消费金额',
data: []
}]
});
function getFormLine() {
return $http.get("/billsDetail/twoMonthChartData").success(function (response) {
//为图表设置值
<strong><span style="color:#ff0000;">chartLine.series[0].setData(response.data.lastMonth);
chartLine.series[1].setData(response.data.thisMonth);
chartLine.xAxis[0].setCategories(eval(response.data.categorys));</span></strong>
}).error(function (response) {
$log.debug("请求超时或网络故障!获得列表失败!")
});
}
getFormLine();
});
后端代码：
public JSONObject listLastMonthAndThismonthBillsData() {
JSONObject json =new JSONObject();
List<string> categorys =new ArrayList<string>();
List<double> lastMonthData=new ArrayList<double>();
List<double> thisMonthData=new ArrayList<double>();
String sql="select lastmonth_repayment,thismonth_bill,period from credit_card_bills order by period asc " ;
List<jsonobject> resultdata = billsDetailDao.list(sql);
for(JSONObject dataItem:resultdata)
{
categorys.add(dataItem.getString("period"));
lastMonthData.add(dataItem.getDouble("lastmonth_repayment"));
thisMonthData.add(dataItem.getDouble("thismonth_bill"));
}
json.put("categorys",categorys);
json.put("lastMonth",lastMonthData);
json.put("thisMonth",thisMonthData);
return json;
}</jsonobject></double></double></double></double></string></string>
另一种如下：
<script type="text/javascript">
$(function () {
// define the options
var options = {
chart: {
renderTo: 'container',
type: 'line',
events: {
load: function (event) {
for (var i = this.series.length - 1 - 1; i > 0; i--) {
this.series[i].hide(); //设置只显示第一条线，其他都不显示
}
}
}
},
title: {
text: '飞流游戏中心iOS日报表——数据走势图',
margin: 15
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
/*
align: 'left',
verticalAlign: 'top',
y: 320,
floating: true,
borderWidth: 0
*/
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 70,
borderWidth: 0,
itemMarginTop: 5,
itemMarginBottom: 5
},
tooltip: {
shared: true,
crosshairs: true,
style: {
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%Y, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
credits: {
enabled: false //去掉highcharts网站url
},
series: [{
name: '新增用户数',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: '注册/绑定用户数'
}, {
name: '联网用户数'
}, {
name: '联网次数'
}, {
name: '联网老用户数'
}, {
name: '老用户联网次数'
}, {
name: '下载次数'
}, {
name: '下载人数'
}, {
name: '宏观留存率(%)'
}]
};
// Load data asynchronously using jQuery. On success, add the data
// to the options and initiate the chart.
// This data is obtained by exporting a GA custom report to TSV.
//GA = Google analytics 是谷歌公司的一款免费企业级分析软件，任何人都可以免费注册使用。软件的特点是电子商务功能。GA自定义报告
// http://api.jquery.com/jQuery.get/
var datestart = document.getElementById("start").innerHTML;
var dateend = document.getElementById("end").innerHTML;
jQuery.get('http://pmtest.feiliu.com/?c=ptd&a=chart_ajax_1133i', {timestart:datestart,timeend:dateend}, function(data, state, xhr) {
var records = [],
date,
// set up the data series
newUsers = [],
regUsers = [],
connUsers = [],
connTimes = [],
connUsersOld = [],
connTimesOld = [],
dlTimes = [],
dlUsers = [],
livePercentage = [];
// inconsistency
if (typeof data !== 'string') {
data = xhr.responseText;
}
// split the data return into lines and parse them
data = eval('(' + data + ')');
//alert(data);
jQuery.each(data, function(i, record) {
// all data records start with a double quote
date = record.thedate;
//alert(date);
newUsers.push([
date,
parseInt(record.new_user, 10)
]);
regUsers.push([
date,
parseInt(record.reg_user)
]);
connUsers.push([
date,
parseInt(record.conn_user)
]);
connTimes.push([
date,
parseInt(record.conn_time)
]);
connUsersOld.push([
date,
parseInt(record.conn_user_old)
]);
connTimesOld.push([
date,
parseInt(record.conn_times_old)
]);
dlTimes.push([
date,
parseInt(record.dl_time)
]);
dlUsers.push([
date,
parseInt(record.dl_user)
]);
livePercentage.push([
date,
parseInt(record.percentage)
]);
});
options.series[0].data = newUsers;
options.series[1].data = regUsers;
options.series[2].data = connUsers;
options.series[3].data = connTimes;
options.series[4].data = connUsersOld;
options.series[5].data = connTimesOld;
options.series[6].data = dlTimes;
options.series[7].data = dlUsers;
options.series[8].data = livePercentage;
$('#container').highcharts(options);
});
});
</script>
第三种：
var mysqlBytesOptions = {
chart: {
renderTo: 'mysql-bytes-container',
type: 'spline'
},
title: {
text: '',
x: -20 //center
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'kBps'
}, min: 0
},
series: [{
name: 'Sent'
},{
name: 'Recieved'
}]
};
$.ajax({
url: 'stats/mysql/bytes',
dataType: "json",
success: function (data) {
//init series arays
sent = [];
recieved =[];
for (i in data) {
//build
var r = data[i];
sent.push([r.ts, r.kBps_sent]);
recieved.push([r.ts, r.kBps_recieved]);
}
//save series
mysqlBytesOptions.series[0].data = sent;
mysqlBytesOptions.series[1].data = recieved;
var chart = new Highcharts.Chart(mysqlBytesOptions);
},
cache: false
});
第四种，多条动态实时更新：
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg,
// don't animate in old IE
marginRight: 10,
events: {
load: function() {}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
{
title: {
text: 'Name'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() { // generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
},
{
name: 'Random data',
data: (function() { // generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
}); // set up the updating of the chart each second
var series = chart.series[0];
var series1 = chart.series[1];
setInterval(function() {
var x = (new Date()).getTime(),
// current time
y = Math.random();
series.addPoint([x, y + 1], true, true);
series1.addPoint([x, y - 1], true, true);
},
1000);
});
});
html代码：
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script>
//左侧Javascript代码
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
定时局部刷新:
<script>
$(function(){
setInterval(aa,10);
function aa(){
$("#aa").append("fdsadfsa");
}
})
</script>
