阅读背景:

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); Highcharts.setOptions({global:{useUTC : false}}



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: