SVG图表 - Highcharts和Highstock中文使用教程DEMO API - Json
在使用Highcharts和Highstock时候，相信大家有很多技术难点寻找不到解决方案，在此http://my.oschina.net/cart/特意给大家分享成功经验：
Highstock API Demo - 针对Highcharts的区别是：此使用Json返回数据
<script type="text/javascript">
$(function() {
Highcharts.setOptions({
global:{
useUTC : false//避免因为时区引起的8小时误差，以服务端返回的时间戳微妙数为准
}
});
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['AAA', 'BBB', 'CCC', 'DDD'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
//这里巧妙的理由i循环来使用type的值，如0、1、2
$.getJSON('http://my.oschina.net/cart/'+i, function(data) {
seriesOptions[i] = {
name: name,
data: data//Json数据如[['AAA':25],['BB',33],['CC',88]]
};
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
function createChart() {
$('#container').highcharts('StockChart', {
chart: {
type: 'area'
},
rangeSelector:{
inputEnabled: $('#container').width() > 480,
inputDateFormat:'%Y-%m-%d',
selected: 2,
buttons: [{
type: 'day',
count: 1,
text: '1天'
}, {
type: 'day',
count: 3,
text: '3天'
}, {
type: 'week',
count: 1,
text: '1星期'
}, {
type: 'month',
count: 1,
text: '1月'
}, {
type: 'month',
count: 3,
text: '3月'
}, {
type: 'month',
count: 6,
text: '6月'
}, {
type: 'year',
count: 1,
text: '1年'
}, {
type: 'all',
text: '所有'
}]
},
xAxis: {
labels: {
rotation : -50,//旋转-50度，解决SVG字太拥挤的问题
y : 50
},
dateTimeLabelFormats: {
millisecond: '%Y-%m-%d %H:%M:%S',
second: '%Y-%m-%d %H:%M:%S',
minute: '%Y-%m-%d %H:%M',
hour: '%Y-%m-%d %H:%M',
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
tickInterval:200,//每200分成1等份
title : {
text : '调用次数'
},
plotLines : [{
value : 0,
width : 1,
color : '#808080'
}] ,
min:0
},
credits : {
enabled:false//不显示版权信息
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
xDateFormat: '%Y-%m-%d %A',
crosshairs: [{
color:'red',//十字线的颜色
dashStyle:'shortdot'
}]
},
series: seriesOptions
});
}
});
</script>
<div id="container" style="height:550px;min-width:310px"></div>
Highcharts API Demo - 针对Highstock的区别是：此直接赋值数据
饼状图使用 Json 数据同步返回 Demo
<script type="text/javascript">
$(function () {
$('#container1').highcharts({
credits : {
enabled:false
},
title: {
text: 'AAA浏览排行榜'
},
tooltip: {
headerFormat: '/{point.key}<br />',
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
useHTML: true,//开启HTML模式，标题使用超链接，更人性化
format: '<a href="http://my.oschina.net/cart/" target="_blank"><b>{point.name}</b></a>: {point.y}次'
}
}
},
series: [{
type: 'pie',
name: '浏览次数',
data: getData(1)
}]
});
});
function getData(type){
var jsonData;
$.ajax({
type: 'POST',
url: 'http://my.oschina.net/cart/',
data: {
'type' : type,
'fromDate' : '2010-01-01 00:00:00',
'toDate' : '2020-01-01 23:59:59'
},
async: false,//选择同步返回，这点很重要
cache: false,
dataType: 'json',
success: function(data)
{
jsonData = data;
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("http://my.oschina.net/cart/.\n\ntextStatus: '" + textStatus + "'\nerrorThrown: '" + errorThrown + "'\nresponseText:\n" + XMLHttpRequest.responseText);
}
});
return jsonData;
}
</script>
<div id="container1" style="float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc"></div> <div id="container2" style="float:left;border-bottom:1px solid #ccc"></div> <div id="container3" style="float:left;border-right:1px solid #ccc"></div> <div id="container4" style="float:left"></div>
PHP代码
$results = array();
foreach($this->getData() as $k => $v){
$results[$k][0] = $v['time'] * 1000;//得到的服务端时间戳是秒数，然后乘以1000就得到JS需要的微妙数了
$results[$k][1] = (int)$v['count'];//此项必须为 数字
}
header('Content-type: application/json;charset=utf-8');
echo json_encode($results);
exit();