在使用Highcharts和Highstock时候，相信大家有很多技术难点寻找不到解决方案，在此http://my.oschina.net/cart/特意给大家分享成功经验：
Highstock API Demo - 针对Highcharts的区别是：此使用Json返回数据
1<script type="text/javascript"> 2$(function() { 3 Highcharts.setOptions({ 4 global:{ 5 useUTC : false//避免因为时区引起的8小时误差，以服务端返回的时间戳微妙数为准 6 } 7 }); 8 9 var seriesOptions = [], 10 yAxisOptions = [], 11 seriesCounter = 0, 12 names = ['AAA', 'BBB', 'CCC', 'DDD'], 13 colors = Highcharts.getOptions().colors; 14 15 $.each(names, function(i, name) { 16 //这里巧妙的理由i循环来使用type的值，如0、1、2 17 $.getJSON('http://my.oschina.net/cart/'+i, function(data) { 18 seriesOptions[i] = { 19 name: name, 20 data: data//Json数据如[['AAA':25],['BB',33],['CC',88]] 21 }; 22 seriesCounter++; 23 if (seriesCounter == names.length) { 24 createChart(); 25 } 26 }); 27 }); 28 29 function createChart() { 30 $('#container').highcharts('StockChart', { 31 chart: { 32 type: 'area' 33 }, 34 rangeSelector:{ 35 inputEnabled: $('#container').width() > 480, 36 inputDateFormat:'%Y-%m-%d', 37 selected: 2, 38 buttons: [{ 39 type: 'day', 40 count: 1, 41 text: '1天' 42 }, { 43 type: 'day', 44 count: 3, 45 text: '3天' 46 }, { 47 type: 'week', 48 count: 1, 49 text: '1星期' 50 }, { 51 type: 'month', 52 count: 1, 53 text: '1月' 54 }, { 55 type: 'month', 56 count: 3, 57 text: '3月' 58 }, { 59 type: 'month', 60 count: 6, 61 text: '6月' 62 }, { 63 type: 'year', 64 count: 1, 65 text: '1年' 66 }, { 67 type: 'all', 68 text: '所有' 69 }] 70 }, 71 xAxis: { 72 labels: { 73 rotation : -50,//旋转-50度，解决SVG字太拥挤的问题 74 y : 50 75 }, 76 dateTimeLabelFormats: { 77 millisecond: '%Y-%m-%d %H:%M:%S', 78 second: '%Y-%m-%d %H:%M:%S', 79 minute: '%Y-%m-%d %H:%M', 80 hour: '%Y-%m-%d %H:%M', 81 day: '%Y-%m-%d', 82 week: '%Y-%m-%d', 83 month: '%Y-%m', 84 year: '%Y' 85 } 86 }, 87 yAxis: { 88 tickInterval:200,//每200分成1等份 89 title : { 90 text : '调用次数' 91 }, 92 plotLines : [{ 93 value : 0, 94 width : 1, 95 color : '#808080' 96 }] , 97 min:0 98 }, 99 credits : { 100 enabled:false//不显示版权信息 101 }, 102 tooltip: { 103 pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>', 104 xDateFormat: '%Y-%m-%d %A', 105 crosshairs: [{ 106 color:'red',//十字线的颜色 107 dashStyle:'shortdot' 108 }] 109 }, 110 series: seriesOptions 111 }); 112 } 113}); 114</script> 115 116 117 118 119 120<div id="container" style="height:550px;min-width:310px"></div>
Highcharts API Demo - 针对Highstock的区别是：此直接赋值数据
饼状图使用 Json 数据同步返回 Demo
1<script type="text/javascript"> 2$(function () { 3 $('#container1').highcharts({ 4 credits : { 5 enabled:false 6 }, 7 title: { 8 text: 'AAA浏览排行榜' 9 }, 10 tooltip: { 11 headerFormat: '/{point.key}<br />', 12 pointFormat: '{series.name}: <b>{point.y}</b>' 13 }, 14 plotOptions: { 15 pie: { 16 allowPointSelect: true, 17 cursor: 'pointer', 18 dataLabels: { 19 enabled: true, 20 useHTML: true,//开启HTML模式，标题使用超链接，更人性化 21 format: '<a href="http://my.oschina.net/cart/" target="_blank"><b>{point.name}</b></a>: {point.y}次' 22 } 23 } 24 }, 25 series: [{ 26 type: 'pie', 27 name: '浏览次数', 28 data: getData(1) 29 }] 30 }); 31}); 32 33function getData(type){ 34 var jsonData; 35 $.ajax({ 36 type: 'POST', 37 url: 'http://my.oschina.net/cart/', 38 data: { 39 'type' : type, 40 'fromDate' : '2010-01-01 00:00:00', 41 'toDate' : '2020-01-01 23:59:59' 42 }, 43 async: false,//选择同步返回，这点很重要 44 cache: false, 45 dataType: 'json', 46 success: function(data) 47 { 48 jsonData = data; 49 }, 50 error: function(XMLHttpRequest, textStatus, errorThrown) 51 { 52 alert("http://my.oschina.net/cart/.\n\ntextStatus: '" + textStatus + "'\nerrorThrown: '" + errorThrown + "'\nresponseText:\n" + XMLHttpRequest.responseText); 53 } 54 }); 55 return jsonData; 56} 57</script> 58 59<div id="container1" style="float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc"></div> 60<div id="container2" style="float:left;border-bottom:1px solid #ccc"></div> 61<div id="container3" style="float:left;border-right:1px solid #ccc"></div> 62<div id="container4" style="float:left"></div>
PHP代码
1$results = array(); 2foreach($this->getData() as $k => $v){ 3 $results[$k][0] = $v['time'] * 1000;//得到的服务端时间戳是秒数，然后乘以1000就得到JS需要的微妙数了 4 $results[$k][1] = (int)$v['count'];//此项必须为 数字 5} 6header('Content-type: application/json;charset=utf-8'); 7echo json_encode($results); 8exit();