SVG图表 - HelloWorld开发者社区

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