自身对highcharts理解

　　最近公司要求做一些图标，动态的添加数据，展示在手机上，以前对Echarts，d3,highcharts只是听说，也没实际去花一定的时间玩玩，也是自以为是，不就看看api的事，结果呢？-----被他们给玩了。也算不错，在自己的努力和一些牛人的帮助下，慢慢的完善了自己的想要的图表。   其实最重要是原生js还有canvas和svg没有很深的基础，后决定，满足工作需求以后需要再花一定的时间用原生去写自己想要的效果，也许需要很长一段时间，但是在这个基础上，你会把js原生基础，比如面向对象，css3，html5等等扎实的过心埋在自己的身体里，废话不多说。用highcharts三个理由：①手机适配人家做的确实到位②大数据的支持确实给力③svg的优势展现的淋漓尽致。　　一，官方有基本的常规用法，想学好，文档必须了解透彻，一般都是基于jquery写的例子，但是你也可以自己封装函数，用原生来调取，性能简单测试一下，没发现两者有什么大的区别。highcharts.js是一些简单图表的框架js,但是要做动态实时数据图，需要highstock.js,其实后者包涵前者，也能使前者的一些效果实现，也就是说引highcharts插件的时候，你有判断选择权。　　<script src="js/jquery-1.7.2.js"></script>   <script src="js/highstock.js"></script>二，下面是我工作需求的一些参数，我做一下解释，由于里面参数太多，就不一一做说明。Highcharts.setOptions({         global: {//由于时间轴的动态数据，需要把时间格式确定一下，utc是国际时间格式，higharts默认是国际，在中国需要GMT，所以这个需要转变为false。              useUTC: false         }  });//获取当前时间三，图表配置$(‘#container‘).highcharts({//jquery选中盒子，并且给盒子加图表，这是基本写法。                    chart: {//所有的配置参数都写在chat这个json里面。                        events: {//处理一些事件，有click  mouseover,load等等，设置其不同的效果，用函数来表达你想要的事件。                            load: function () {                                // 设置图标每秒跟新                                var series = this.series[0];                                setInterval(function () {                                    var i=0;                                    var x = parseInt((new Date()).getTime()), // 当前时间                                            y = Math.abs((Math.random()-0.5))*20;//每个点两个值  x和y。                                    series.addPoint([x, y], true, false);//这是动态增加数据的关键，其实增加的区域在对象series里面。addpoint是其一个方法，如需重新渲染的话用update                                },3000);},                        },                        backgroundColor:‘#fff‘,//图表背景色                        pinchType:‘‘,// 让在移动端可以滑动                        zoomType : ‘‘//点击缩放 里面可以放 y x xy                    },                    colors: [‘#434348‘, ‘#90ed7d‘, ‘#f7a35c‘, ‘#8085e9‘,‘#f15c80‘, ‘#e4d354‘, ‘#8085e8‘, ‘#8d4653‘, ‘#91e8e1‘],//颜色数组，会根据不同的区域自动放不同的颜色，一般在蜡烛图和饼状图效果明显                    credits : { // 网站标识                        enabled : false//版权为fals 就不会再显示highcharts的logo。                    },                    navigator : { // 底部导航内容                        enabled : false//此处如果为true 就会出现导航，你可以设置下面的效果，让其功能出现，可以拖动缩放突变分辨率                    },                    scrollbar : {                        enabled : false//滑动按钮                    },                    rangeSelector : {                        enabled : false                    },                    xAxis: {//x轴设置                        dateTimeLabelFormats: {//给时间轴格式化，展示你想要的时间效果。                            second: ‘D1‘?‘%m-%d‘:‘%H:%M:%S‘,                            minute: ‘D1‘?‘%m-%d‘:‘%H:%M‘,                            hour: ‘D1‘?‘%m-%d‘:‘%H:%M‘,                            day: ‘D1‘?‘%m-%d‘:‘%H:%M‘,                            week: ‘D1‘?‘%m-%d‘:‘%H:%M‘,                            month: ‘D1‘?‘%m-%d‘:‘%H:%M‘                        },                        top:20,//x轴位置                        lineColor: ‘#90ed7d‘,//轴线的颜色                        lineWidth: 1,//轴线的宽度                        type: ‘datetime‘,//声明这是时间轴                        tickWidth: 1,//轴上刻度宽度                        tickColor: ‘#8085e9‘,//刻度颜色                        minRange: 360000,//最小差值，这是以时间戳来计算的                        tickInterval:36e5,//显示刻度的位置，也就是隔多少范围显示一个                        tickLength:10,//线的长度                        labels: {//显示内容的设置，颜色或字体的大小。                            style: {                                color: ‘#000‘,                                fontSize: ‘8px‘                            }                        },                        plotLines: [{//标示线设置。                            value: 0,                            width: 1,                            color: ‘#808080‘                        }]                    },                    yAxis: {//y轴设置 其实与x轴没啥大的区别，就看你想要什么样的效果。                        top:20,                        opposite:true,                        minorTickInterval:"auto",                        lineColor: ‘#8085e9‘,                        lineWidth: 0,                        tickWidth: 0,                        tickLength:0,                        tickColor: ‘#8085e9‘,                        title: {                            text: ‘‘                        },                        labels: {                            style: {                                color: ‘#000‘,                                fontSize: ‘8px‘                            }                        },

                        plotLines: [{//这块需要重点说一下，指示线需要设置一定的样式，可以设置显示的位置，线型，粗细，长短，字体，以及text标签。                            value: 0,                            color: ‘green‘,                            dashStyle: ‘LongDashDotDot‘,                            width: 2,                            label: {                                useHTML: true,                                text: ‘<strong>订单价：‘+0+"</strong>",                                align:"left"                            }                        }]                    },                    plotOptions: {//此处更重要，这是你图表的二次解释说明修改的地方，里面可以根据不同的列表样式来着重说明体现                        area: {//面积图的说明                            fillColor: {//面积颜色渐变。                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},                                stops: [                                    [0, ‘#808080‘],                                    [1, Highcharts.Color(‘#808080‘).setOpacity(0).get(‘rgba‘)]                                ]                            },                            lineWidth: 1,                            marker: {                                enabled: false                            },                            shadow: false,                            states: {                                hover: {                                    lineWidth: 1                                }                            },                            threshold: null                        },                        candlestick: {                            lineColor: ‘black‘                        },                        boxplot: {                            fillColor: ‘#505053‘                        }                    },                    series : [{//数据展示的位置，                        type: ‘M1‘ ?‘area‘:‘candlestick‘,                        name : ‘ha‘                    }                    ]                });五，上面我在chart里面动态增加的数据，如果你想用ajax或者websocket动态增加数据，还可以这么写$(function () {            containerPain();//把上面的函数封装  在这儿调用。但是 series是全局变量，需要var 一个。            setInterval(function () {//此处写ajax或者websocket.                var x = (new Date()).getTime(), // current time                        y = 44+(rnd(0.5,0.6));                series.addPoint（【x,y】）;            }, 1000);        });六，简单的介绍说明一下，也许理解有误忘大神指教。