SVG图表

Easter79
• 阅读 603

在使用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/

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
SVG图表
在使用Highcharts和Highstock(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.highcharts.com%2F)时候,相信大家有很多技术难点寻找不到解决方案,在此http://my.oschina.net/cart/(http://my.oschina.ne
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k