SVG图表 - Highcharts和Highstock中文使用教程DEMO API - Json

为什么80%的码农都做不了架构师？>>>   

在使用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();

版权所有：http://my.oschina.net/cart/

转载于:https://my.oschina.net/cart/blog/268336