highchart 曲线图

$(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: ‘container‘, //图表放置的容器,DIV
            defaultSeriesType: ‘spline‘, //图表类型为曲线图
            events: {
                load: function() {  

                }
            }
        },
        title: {
            text: ‘网络接收流量‘  //图表标题
        },
        xAxis: { //设置X轴
            type: ‘datetime‘,  //X轴为日期时间类型
            tickPixelInterval: 150  //X轴标签间隔
        },
        yAxis: { //设置Y轴
            title:{
                text: ‘网络接收流量‘
            },
            max: 102400, //Y轴最大值
            min: 0,  //Y轴最小值
            labels: {
                formatter: function() {
                    return this.value/1000 +‘KB‘;
                }
            }
        },
        tooltip: {//当鼠标悬置数据点时的提示框
            formatter: function() { //格式化提示信息
               // return ‘网络流量‘+
               // Highcharts.dateFormat(‘%H:%M:%S‘, this.x) +‘‘+
               // Highcharts.numberFormat(this.y, 2)+‘%‘;
            }
        },
        legend: {
            enabled: false  //设置图例不可见
        },
        exporting: {
            enabled: false  //设置导出按钮不可用
        },
        credits: {
            text: ‘‘, //设置LOGO区文字
            url: ‘‘ //设置LOGO链接地址
        },
        series: [{
            data: (function() { //设置默认数据,
                var data = [],
                time = (new Date()).getTime(),
                i; 

                for (i = -19; i <= 0; i++) {
                    data.push({
                        x: 1410213036000,
                        y: 1250
                    });
                } 

                return data;
            })()
        }]
    });
}); 
<!doctype html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
  <script>
    //左侧Javascript代码
  </script>
</head>
<body>
  <div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>
时间: 2024-08-06 06:04:43

highchart 曲线图的相关文章

highchart应用示例2-上:圆角柱状图,下:多指标曲线图

1.ajax调用接口获取数据 function getCityData() { var date1 = $('#datetimepicker1').val(); var date2 = $('#datetimepicker2').val(); var params = { 'date1': date1, 'date2': date2, 'city': '荣成','type':type}; $.getJSON('http://127.0.0.1:8081/rcforeInterface/rest/

Highchart插件简介和引入方式

一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highcharts 支持的图表类型有直线图.曲线图.区域图.柱状图.饼状图.散状点图.仪表图.气泡图.瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图. http://www.hcharts.cn/products/highcharts http://www.hcharts.cn/docs

highchart.js的使用

highchart.js是一个很实用的图表插件,涵盖柱状图.曲线图,区域图.3D图.饼图.散列图.混合图等等,功能很强大. 首先去官网下载最新版highchart.js插件,中文网地址:http://www.hcharts.cn/ 当然可以不用下载,直接使用官网所提供的CND.(在下载页可以看到) 接下来以我的一个柱形图为例: 效果图如下: 通过调节上下左右视角可以变换成立体的效果: 以下是具体代码的实现: 先引入js文件,我没有下载,直接使用的中文网的CND,比较方便: <script src

进一步封装highchart,打造自己的图表插件:jHighChart.js

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表.但是参考官网的实例,我发现如果在项目中频繁使用highchart,按照它的方式还是挺复杂的,我这里所谓的复杂并不是难而是麻烦,因为你每写一个图表你就必须重新写类似于下面结构的javascript代码: $('#container').highcharts({ title: { text: 'M

自动化邮件报告平台-邮件发送highchart图表

前段时间参与开发这样的一个系统,负责前端设计开发,使用人员提出需要在邮件发送的时候自动获取这些highchart图表数据,并显示在平台页面上,当发送邮件的时候也把图表附带在邮件中. highchart是一个比较强大的图表组件,这个图表组件以svg方式渲染在网页上,渲染完毕后会在网页中添加了svg元素,可以通过dom 或者jQuery 把svg内容单独抽取出来,此svg元素也能够在网页上直接显示,如下图所示.  但是,在邮箱环境下,这些svg元素不一定能展示在邮件里面,各种邮箱环境不同,在手机端邮

8-Highcharts曲线图之对数直线图

<!DOCTYPE> <html lang='en'> <head> <title>8-Highcharts曲线图之对数直线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js">

C# Chart控件,chart、Series、ChartArea曲线图绘制的重要属性

原文有备份,如有错误和需要改进的地方,请不吝指正会继续修改的 8个月没写博客了- -,一来是有不想继续干开发的想法,二来是赖的写,三来还是不想总结.所以为了继续坚持自己的开发和总结的信念,总结一下C# chart控件的一些基本属性,由于属性太多了,一时半会儿写不完,以后继续补充,这里总结重要的常用的属性 为避免耽误不喜欢这种曲线图效果的亲们的时间,先看一下小DEMO效果图: 先简单说一下,从图中可以看到一个chart可以绘制多个ChartArea,每个ChartArea都可以绘制多条Series

highchart访问一次后台服务返回多张图表数据

本文承接上一篇,我们制作动态图表的时候,往往需要的不止一张图表,如果每张图表都与服务接口做一次交互的话未免太过频繁,这无论对前后还是后台都是一种压力,本文介绍一种一次访问返回多组数据的方式来减少前台与后台服务的交互,闲话少说,查看动态效果  →.→ 详细代码 ←.← 如上文所示,highchart 的 chart 属性可以添加 events 事件,上文中我们插入的事件为: events: { load: function () { var series = this.series[0]; var

鼠标移动到曲线图上显示值

完成折线图报表后,产品经理要求把折线上的数值去掉,鼠标经过折线点时显示数值,实现方法如下: 该方法针对dotnetcharting 下的charting折线图报表使用. 实现思路,在该窗体上添加一个lable标签,当鼠标经过折线点时获取该点的x轴,y轴值和鼠标坐标值.然后将lable的坐标标记为鼠标所在坐标,并且给lable赋值,并且将lable显示出来. /// <summary> /// 鼠标移动到曲线图上显示值 /// </summary> /// <param nam