自身对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,
                            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',
                            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);
        });
六,简单的介绍说明一下,也许理解有误忘大神指教。
原文地址:https://www.cnblogs.com/lixuekui/p/6130821.html