使用Highcharts生成折线图与曲线图

原创 2015年07月08日 11:02:01

1、城市气温变化折线图

通过以下配置,可以生成一个带网格的、显示数据点具体数据的、可放大的、去除LOGO标签的折线图。具体请看代码和注释

var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_line', //图表放置的容器,DIV 
            defaultSeriesType: 'line', //图表类型line(折线图), 
            zoomType: 'x'   //x轴方向可以缩放 
        }, 
        credits: { 
            enabled: false   //右下角不显示LOGO 
        }, 
        title: { 
            text: '主要城市月平均气温' //图表标题 
        }, 
        subtitle: { 
            text: '2011年'  //副标题 
        }, 
        xAxis: {  //x轴 
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', 
 '11月', '12月'], //x轴标签名称 
            gridLineWidth: 1, //设置网格宽度为1 
            lineWidth: 2,  //基线宽度 
            labels:{y:26}  //x轴标签位置:距X轴下方26像素 
        }, 
        yAxis: {  //y轴 
            title: {text: '平均气温(°C)'}, //标题 
            lineWidth: 2 //基线宽度 
        }, 
        plotOptions:{ //设置数据点 
            line:{ 
                dataLabels:{ 
                    enabled:true  //在数据点上显示对应的数据值 
                }, 
                enableMouseTracking: false //取消鼠标滑向触发提示框 
            } 
        }, 
        legend: {  //图例 
            layout: 'horizontal',  //图例显示的样式:水平(horizontal)/垂直(vertical) 
            backgroundColor: '#ffc', //图例背景色 
            align: 'left',  //图例水平对齐方式 
            verticalAlign: 'top',  //图例垂直对齐方式 
            x: 100,  //相对X位移 
            y: 70,   //相对Y位移 
            floating: true, //设置可浮动 
            shadow: true  //设置阴影 
        }, 
        exporting: { 
            enabled: false  //设置导出按钮不可用 
        }, 
        series: [{  //数据列 
            name: '北京', 
            data: [ - 4.6, -2.2, 4.5, 13.1, 19.8, 24.0, 25.8, 24.4, 19.3, 12.4, 4.1, -2.7] 
        }, 
        { 
            name: '广州', 
            data: [13.3, 14.4, 17.7, 21.9, 24.6, 27.2, 30.8, 32.1, 27.2, 23.7, 21.3, 15.6] 
        }] 
    }); 
}); 

2、CPU使用记录走势图

通过相关配置,可以生成一个随着时间变化(每隔5秒更新一次)的曲线图。

var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_spline', //图表放置的容器,DIV 
            defaultSeriesType: 'spline', //图表类型为曲线图 
            events: { 
                load: function() {  
                    var series = this.series[0]; 
                    //每隔5秒钟,图表更新一次,y数据值在0-100之间的随机数 
                    setInterval(function() { 
                        var x = (new Date()).getTime(), // 当前时间 
                        y = Math.random()*100;  
                        series.addPoint([x, y], true, true); 
                    }, 
                    5000); 
                } 
            } 
        }, 
        title: { 
            text: 'CPU使用记录走势图'  //图表标题 
        }, 
        xAxis: { //设置X轴 
            type: 'datetime',  //X轴为日期时间类型 
            tickPixelInterval: 150  //X轴标签间隔 
        }, 
        yAxis: { //设置Y轴 
            title: '', 
            max: 100, //Y轴最大值 
            min: 0  //Y轴最小值 
        }, 
        tooltip: {//当鼠标悬置数据点时的提示框 
            formatter: function() { //格式化提示信息 
                return 'CPU使用率'+ 
                Highcharts.dateFormat('%H:%M:%S', this.x) +''+  
                Highcharts.numberFormat(this.y, 2)+'%'; 
            } 
        }, 
        legend: { 
            enabled: false  //设置图例不可见 
        }, 
        exporting: { 
            enabled: false  //设置导出按钮不可用 
        }, 
        credits: { 
            text: 'Helloweba.com', //设置LOGO区文字 
            url: 'http://www.helloweba.com' //设置LOGO链接地址 
        }, 
        series: [{ 
            data: (function() { //设置默认数据, 
                var data = [], 
                time = (new Date()).getTime(), 
                i; 
 
                for (i = -19; i <= 0; i++) { 
                    data.push({ 
                        x: time + i * 5000,  
                        y: Math.random()*100 
                    }); 
                } 
                return data; 
            })() 
        }] 
    }); 
}); 
注意,当X轴类型为datetime日期时间型的,需要设置时区,在开头加上以下代码即可:

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

Highcharts曲线图展示气温(带注释)

代码如下: $(function () {     $('#container').highcharts({         title: {//标题  ...
  • yayun0516
  • yayun0516
  • 2014年12月30日 11:40
  • 2163

HighCharts操作案例-折线图

"> My JSP 'TestHighCharts.jsp
  • l294333475
  • l294333475
  • 2014年08月13日 21:57
  • 2770

Highcharts-多条折线图(静态、动态)

var chart = new Highcharts.Chart({}) 多线条折线图
  • luckycz
  • luckycz
  • 2015年07月17日 12:09
  • 6059

手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍

因为项目需要搞一个折线图,按照日期显示相应的成绩,所以有了本文。 以前用过一次XCL-chart,但是感觉只适合固定图表,不去滑动的那种,因为你一滑动太卡了你懂得(毕竟作者好久没更新优化了),拙言...
  • u012534831
  • u012534831
  • 2016年05月26日 11:28
  • 39152

使用helloCharts库实现折线图

HelloCharts在github上维护:https://github.com/lecho/hellocharts-android 1,gradle引入helloCharts开发库  depen...
  • lkx94
  • lkx94
  • 2016年10月26日 18:03
  • 685

Highcharts将曲线图改为折线图

defaultSeriesType: 'spline'改为defaultSeriesType: 'line' defaultSeriesType:图表类别,可取值有:line、spline、...
  • linminqin
  • linminqin
  • 2011年11月28日 22:28
  • 3775

Highcharts + jQuery + Servlet 实现从后台获取JSON实时刷新图表

不墨迹,直接上代码,亲测可用。
  • zhaizu
  • zhaizu
  • 2013年12月06日 17:35
  • 11691

开源的HelloCharts源码修改实现动态画折线图

  • 2016年11月03日 17:50
  • 31.93MB
  • 下载

HelloCharts开源图表库(一)之折线图

之前我们介绍了一个非常优秀开源图表库MPAndriodChart,请参考http://blog.csdn.net/shineflowers/article/details/44704723。 我们...
  • shineflowers
  • shineflowers
  • 2015年04月11日 19:54
  • 27961

Servlet中的json数据传入highcharts中的data,形成动态的折线图

highcharts中的data是一个json数组:data:[4,1,12,4,3,3,1] 所以在servlet封装json为:public class AdFromByMdaReportAct...
  • zhaojw_420
  • zhaojw_420
  • 2017年03月24日 21:44
  • 597
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Highcharts生成折线图与曲线图
举报原因:
原因补充:

(最多只允许输入30个字)