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翻译一下的冲动。。。
 
 

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值的更多相关文章

  1. echarts使用记录（三）：x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  2. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  3. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  4. c# winform Chart Pie 中若X轴数据为字符串时，#VALX取值为0

    https://q.cnblogs.com/q/83848/ 在winform程序中用自带的Chart进行画图表时,若画饼图,其中X轴数据为字符串,这时候如果想设置Label值的格式为#VALX:#V ...

  5. Chart.js Y轴数据以百分比展示

    新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽 ...

  6. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  7. highcharys去掉x轴，y轴轴线和刻度

    x轴 xAxis: { lineWidth :,//去掉x轴线 tickWidth:,//去掉刻度 labels: { enabled: false },//去掉刻度数字 }, y轴 yAxis: { ...

  8. Highcharts属性详解

    Highcharts的基本属性和方法详解 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学 ...

  9. Highcharts属性

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. xhr.withCredentials发送跨域请求凭证

    一.前言 今天遇到一个坑,浏览器请求数据的时候gg了.浏览器报错如下图: 因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Al ...

  2. js------10种循环方法

    let arr = [{a:1},{a:2},{a:3},{a:4},{a:5}]; // 1.while循环 let sum = 0; let num = 1; while(num <= 1) ...

  3. 微服务学习二：springboot与swagger2的集成

    现在测试都提倡自动化测试,那我们作为后台的开发人员,也得进步下啊,以前用postman来测试后台接口,那个麻烦啊,一个字母输错就导致测试失败,现在swagger的出现可谓是拯救了这些开发人员,便捷之处 ...

  4. angular 禁止缓存

    angular 单页面开发,会存在和管理很多HTML和JS文件,缓存有时是个麻烦. 在开发和测试阶段,F12调出调试工具,禁止缓存F5刷新下就好了. 但是在客户那里缓存就体验效果不好,甚至认为有问题, ...

  5. SQL 语句在查询分析器执行很快，程序 Dapper 参数化查询就很慢（parameter-sniffing）

    这个问题困扰我好长时间了,使用SQLSERVER 事务探查器找到执行超时的SQL语句,参数查询都是通过执行exe sp_executesql 的存储过程调用,因为它能够分析并缓存查询计划,从而优化查询 ...

  6. Spark的优势

    首先了解一下Mapreduce 它最本质的两个过程就是Map和Reduce,Map的应用在于我们需要数据一对一的元素的映射转换,比如说进行截取,进行过滤,或者任何的转换操作,这些一对一的元素转换就称作 ...

  7. 【Java并发编程】22、Exchanger源码解析（JDK1.7）

    Exchanger是双向的数据传输,2个线程在一个同步点,交换数据.先到的线程会等待第二个线程执行exchangeSynchronousQueue,是2个线程之间单向的数据传输,一个put,一个tak ...

  8. 前端学习 之 Bootstrap （一）

    中文文档 一.前言 1.简介 Bootsrtap作为一个前端框架,开箱即用,封装了前段开发的大量底层细节,开放灵活,对响应式设计网页很好支持,组件丰富,社区活跃. 特点: 可重用性 一致性 灵活的栅栏 ...

  9. Docker 搭建 ELK 收集并展示 tomcat 日志

    架构 前端展示 --> 索引搜索 <-- 日志提取及过滤 --> 日志缓存 <-- 日志收集 Kibana --> Elastash <-- Logstash -- ...

  10. MySQL主从及主主环境部署

    主从同步 主机环境 mysql的安装可以参考:https://www.cnblogs.com/brianzhu/p/8575243.htmlCentos7版本master:192.168.192.12 ...