您的位置：首页 > 其它

Highcharts绘制直线图

2014-02-12 15:36 246 查看

1.Highcharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。

2.Highcharts绘制直线图

1）先看下绘制直线的效果

2)绘制直线的js文件--chart_line.js：

[javascript] view
plaincopy

var chart;

$(function() {

    chart = new Highcharts.Chart({

        chart: {

            renderTo: 'chart_line',//图表放置的容器--Div

            defaultSeriesType: 'line',//图表类型line(折线图)

        },

        title: {

            text: null //图表标题，这里设置为空，可以根据自己的需求设置内容

        },

        credits:{enabled:false},

        legend:{enabled:false},

        xAxis: {//x轴

            categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F','S','S'],//x轴标签名称

            gridLineWidth: 0,//设置网格宽度为1

            lineWidth: 2,//基线宽度

            labels:{align:'left'},

            plotBands: [{//数据块显示,可以根据from,to属性绘制数据块

                color: '#A8A8A8',

                width: 2,

                value: 4,

                label: {

                    text: 'Today',

                    style: {color: 'black',font:'normal 11px Verdana, sans-serif' },

                    align: 'center',

                    textAlign:'center',

                    rotation: 360,

                    verticalAlign:'bottom',

                    y:25

                }

            }]

        },

        yAxis: {

            title: {text: 'Money',align: 'high',offset:-45,rotation: 0,y:-2,x:-15,style: {color: 'black',font:'normal 11px Verdana, sans-serif' }},

            lineWidth: 2,



            gridLineWidth: 0,

            tickPixelInterval:40,

            labels: {

                formatter: function() {//去掉Y轴的刻度显示

                    return '';

                }

            },

            plotBands: [{

                color: '#A8A8A8',//设置数据块的颜色

                width: 2,

                value: 24,

                label: {

                    text: 'Limit',

                    style: {color: 'black',font:'normal 11px Verdana, sans-serif' },//设置数据块对应字体颜色

                    align: 'right',

                    textAlign:'right',

                    verticalAlign:'bottom',

                    x: 0

                }

            }]

        },

        plotOptions:{//设置数据点

            line:{

                dataLabels:{

                    enabled:false //在数据点上不显示对应的数据值

                },

                enableMouseTracking: true //取消鼠标滑向触发提示框

            }

        },

        series: [{//数据列

            name: 'Lower',

            data: [{y:5,marker:{enabled: false}},{y: 10,marker:{enabled: false}},{y: 10,marker:{enabled: false}},{y: 10,marker:{enabled: false}},{y: 20,marker:{enabled: false}},null,null,null,null,null,null,null,null,null],

            color:'green'

        },{

            name: 'Middle',

            data: [null,null,null,null,{y: 20,marker:{enabled: false}}, {y: 21,marker:{enabled: false}}, {y: 22,marker:{enabled: false}},{y: 23,marker:{enabled: false}},{y: 24,marker:{enabled: false}},null,null,null,null,null],

            color:'#FF8000'

        },{

            name: 'High',

            data: [null,null,null,null,null, null, null, null,{y: 24,marker:{enabled: false}},{y: 25,marker:{enabled: false}},{y: 26,marker:{enabled: false}},{y: 27,marker:{enabled: false}},{y: 28,marker:{enabled: false}},{y: 29,marker:{enabled: false}}],

            color:'#FF0000'

        }

        ]

    }); //通过marker控制线上的点是否显示

});

3）HTML对应的内容：

[html] view
plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Line Card</title>

<link type="text/css" href="css/redmond/jquery-ui-1.8.23.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script src="js/highcharts.src.js"></script>

<script src="js/chart_line.js">

</script>

</head>

<body>

<div id="chart_line" style="width:400px; height: 300px" align="left">

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航