Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网：https://www.hcharts.cn/demo/highcharts

Highcharts API文档：https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

 

Highcharts.setOptions({global:{useUTC : false}});  

$(function(){    

    //声明报表对象    

    var chart = new Highcharts.Chart({    

        chart: {  

        renderTo: 'container', // 报表显示在 页面位置 container 为 div 定义的属性  

        defaultSeriesType: 'spline', // 定义报表类型 例如：line ，spline ，colume  

        events: {  

                load:  getForm  //调用js 方法  

            }  

        },  

        title:{  

            text:'实时监测曲线图" //定义曲线报表 名称  

        },  

        xAxis: {  

            type: 'datetime', // 定义时间轴的 类型  

            maxPadding : 0.05,  

            minPadding : 0.05,  

            tickWidth:1,//刻度的宽度  

            lineWidth :1,//自定义x轴宽度  

            gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线  

            lineColor : '#990000'     

        },  

        yAxis: {  

                max:12, // 定义Y轴 最大值  

                min:0, // 定义最小值  

                minPadding: 0.2,   

                maxPadding: 0.2,  

                tickInterval:1, // 刻度值  

                title: {  

                    text: 'PH值'  

                },  

                // plotLines 表示为定义曲线报表中的 （刻度线）或者叫做（定义的区间范围）  

　　　　　 // 一下为2条表示线  

                plotLines: [{   

                            value: 6,  

                            color: 'green',  

                            dashStyle: 'shortdash',  

                            width: 2,  

                            label: {  

                                text: '正常'  

                            }  

                        },{  

                            value: 8,  

                            color: 'green',  

                            dashStyle: 'shortdash',  

                            width: 2,  

                            label: {  

                                text: '正常'  

                            }  

                        }  

                }]  

        },  

        tooltip: {  // 表示为 鼠标放在报表图中数据点上显示的数据信息  

            formatter: function() {  

                  return '<b>'+'日期:' +'</b>'  

　　　　　　　　+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+  

                   '<b>'+'<%=lbname%>:' +'</b>'+ this.y+'  <%=shll%>';  

            }  

        },  

        series: [{  

            name: 'PH',  

            data: [] // 此处存放数据值 用,分开 例如：1.8,8.9,null,9.2,   如果在某一点数据为空    

　　　　　　　　 //可以用null 来表示   

            　　　　//如果是想动态扶植  这个位置 应该为空 即：data: []  

        }]  

    });    

    // 与后台进行数据交互  

    function getForm(){    

        jQuery.getJSON("test!test.do?id=123456", null, function(data) {     

            //为图表设置值     

            chart.series[0].setData(data);     

        });       

    }    

    //定时刷新 列表数据  

   $(document).ready(function() {    

       //每隔3秒自动调用方法，实现图表的实时更新    

       window.setInterval(getForm,50000);     

   });    

});  

  

//定义 曲线报表图 的样式  

    Highcharts.theme = {  

       colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',  

 '#FFF263', '#6AF9C4'],  

       chart: {  

          backgroundColor: {  

             linearGradient: [0, 0, 500, 500],  

             stops: [  

                [0, 'rgb(255, 255, 255)'],  

                [1, 'rgb(240, 240, 255)']  

             ]  

          },  

          borderWidth: 2,  

          plotBackgroundColor: 'rgba(255, 255, 255, .9)',  

          plotShadow: true,  

          plotBorderWidth: 1  

       },  

       title: {  

          style: {   

             color: '#000',  

             font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'  

          }  

       },  

       subtitle: {  

          style: {   

             color: '#666666',  

             font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'  

          }  

       },  

       xAxis: {  

          gridLineWidth: 1,  

          lineColor: '#000',  

          tickColor: '#000',  

          labels: {  

             style: {  

                color: '#000',  

                font: '11px Trebuchet MS, Verdana, sans-serif'  

             }  

          },  

          title: {  

             style: {  

                color: '#333',  

                fontWeight: 'bold',  

                fontSize: '12px',  

                fontFamily: 'Trebuchet MS, Verdana, sans-serif'  

  

             }              

          }  

       },  

       yAxis: {  

          //minorTickInterval: 'auto'  // 此处会在Y轴坐标2点之前出现小格  所以就没有使用。  

       },  

       legend: {  

          itemStyle: {           

             font: '9pt Trebuchet MS, Verdana, sans-serif',  

             color: 'black'  

          },  

          itemHoverStyle: {  

             color: '#039'  

          },  

          itemHiddenStyle: {  

             color: 'gray'  

          }  

       },  

       labels: {  

          style: {  

             color: '#99b'  

          }  

       }  

    };  

    var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

常用的文档说明：

 

1.chart：

renderTo 图表的页面显示容器

defaultSeriesType 图表的显示类型（line,spline, scatter, splinearea bar,pie,area,column）

margin 上下左右空隙

events 事件

click function(e) {}

load function(e) {}

 

2.xAxis：yAxis:

属性：

gridLineColor 网格颜色

reversed 是否反向 true ,false

gridLineWidth 网格粗细

startOnTick 是否从坐标线开始画图区域

endOnTick 是否从坐标线结束画图区域

tickmarkPlacement 坐标值与坐标线标记的对齐方式on,between

tickPosition 坐标线标记的样式 向内延伸还是向外延伸(insidel,outside)

tickPixelInterval 决定着横坐标的密度

tickColor 坐标线标记的颜色

tickWidth 坐标线标记的宽度

lineColor 基线颜色

lineWidth 基线宽度

max 固定坐标最大值

min 固定坐标最小值

plotlines 标线属性

maxZoom

minorGridLineColor

minorGridLineWidth

/minorTickColor

title： 

enabled： 是否显示

text： 坐标名称

Labels 坐标轴值显示类 默认：defaultLabelOptions

formatter 格式化函数

enabled 是否显示坐标轴的坐标值

rotation 倾斜角度

align 与坐标线的水平相对位置

x 水平偏移量

y 垂直偏移量

style 

font 字体样式 默认defaultFont

color 颜色

3.Tooltip 数据点的提示框

enabled 鼠标经过时是否可动态呈现true,false

formatter 格式化提示框的内容样式

 

4.plotOptions 画各种图表的数据点的设置

defaultOptions 默认设置

属性

Area类:

lineWidth 线宽度

fillColor area的填充颜色组

marker{} 设置动态属性

shadow 是否阴影 true,false

states 设置状态？

Line类

dataLabels: 数据显示类

enabled 是否直接显示点的数据true,false

5.series

name 该条曲线名称

data[] 该条曲线的数据项

addPoint([x,y],redraw,cover) 添加描点，redraw 是否重画，cover是否左移

setData: function(data, redraw) 重新设置Data数组，redraw是否重画

remove: function(redraw) 删除曲线

redraw: function() 重画曲线

marker ：

enabled 是否显示描点

 

http://www.highcharts.com是一个很强大的js画图工具，这几天把它用在项目里。

有个问题一直困扰我，在画曲线图的时候，横轴想让它显示成时间格式，怎么搞都不行。如果直接用字符串方式显示，一条线上数据点很多的时候，就都挤到一起去了。

这玩意中文资料很少，去它官网论坛逛了逛，后来发现，xAxis如果想设置成datetime，时间数据是不能放到categories里的，要放到series里去。

 

下面是个例子：

 

01
   var chart1option = {
02
            chart: {
03
                renderTo: 'sysThreadChart'//画到id为sysThreadChart的div容器里
04
            },
05
            credits : {
06
                enabled:false
07
            },
08
            title: {
09
                text: 'Date Time Axis Test',
10
                style: {
11
                    margin: '10px 100px 0 0'// center it
12
                }
13
            },
14
            xAxis: {
15
                type:"datetime",//时间轴要加上这个type，默认是linear
16
                maxPadding : 0.05,
17
                minPadding : 0.05,
18
                //tickInterval : 24 * 3600 * 1000 * 2,//两天画一个x刻度
19
                                //或者150px画一个x刻度，如果跟上面那个一起设置了，则以最大的间隔为准
20
                tickPixelInterval : 150,
21
                tickWidth:5,//刻度的宽度
22
                lineColor : '#990000',//自定义刻度颜色
23
                lineWidth :3,//自定义x轴宽度
24
                gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
25
                //自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
26
               　dateTimeLabelFormats:
27
                {
28
                    second: '%H:%M:%S',
29
                    minute: '%e. %b %H:%M',
30
                    hour: '%b/%e %H:%M',
31
                    day: '%e日/%b',
32
                    week: '%e. %b',
33
                    month: '%b %y',
34
                    year: '%Y'
35
                }
36
            },
37
　　　　　　　//经测试，不能把时间值放到categories里，必须放到series的data里面去
38
　　　　　　　//这样是不行的：categories:[1274457600000,1274544000000,1274630400000]
39
　　　　　　　//时间单位是毫秒，Unix时间戳乘上1000
40
            series:[{
41
                    data:
42
                    [
43
                        [1274457600000, 1200],
44
                        [1274544000000, 1300],
45
                        [1274630400000, 1250],
46
                        [1274803200000,1350]
47
                    ]
48
                    }]
49
    };
50

51
    $(document).ready(function() {
52
         //真正的画图是这句
53
        chart1= new Highcharts.Chart(chart1option);
54
    });

　　

画出来是这样的：

 

 

这个帖子也给了2个例子，似乎时间格式不一定使用时间戳也行？

 

有时间再整理一下其他hightcharts画图的例子，有点把它那个Options Reference翻译一下的冲动。。。

 

 

http://blog.csdn.net/willdehao/article/details/7718947