JQuery图表插件——Highcharts

复制代码 代码如下:

因为品种中需求用到图片生成,全体谷歌了下,找到了那一个插件,顺带写了个DEMO。点击跳转官方网站

1. Highcharts 和 jQuery 结合使用很平价


首先, 正是情形筹划, 供给设置 jQueryHighcharts, 能够一贯运用 CDN:

<head>
   <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js</script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
</head>

摘要:
在图纸渲染成功后,往往大家供给获得图表对象来兑现部分互动、事件等,这里享受一下获得图表对象的二种艺术:1、通过回调函数获取var
chart = null; // 定义全局变量 $(‘#container’).highcharts({ series:
}] }, f …

$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});

先上八个图,分别是曲线、柱状、扇形。

2. 着力配置


var chart = new Highcharts.Chart({
    chart: { //    表
    },
    title: { //    标题   
    },
    subtitle: { // 子标题
    },
    xAxis: {    // X 轴
    },
    yAxis: {    // Y 轴
    },
    tooltip: {  // 提示信息 (如 %,单位等)
    },
    legend:{    // 展示方式, 对其方式等
    },
    exporting: {// 导出图标/打印....
    },
    series: [{  // 数据
    }],
    credits: {  // 关于版权信息
    }
    });

在图纸渲染成功后,往往大家必要获得图表对象来落实部分交互、事件等,这里享受一下收获图表对象的三种艺术:

var chart;
$(‘#container’).highcharts({
chart: {
type: ‘spline’,
animation: Highcharts.svg, // don’t animate in old IE
marginRight: 10,
events: {
load: function() {

图片 1

3. 实际计划

  1. Highcharts 需求选用贰个已企图好的 div, 并内定 id 和宽高端, 图表就位于
    div 里面:

  2. 是还是不是采纳世界时间, 这么些与坐标轴时间刻度有关:

    Highcharts.setOptions({

     global: {
       useUTC: false // 是否使用世界标准时间
     }
    

    });

  3. chart 的配置

    chart: {

     renderTo: 'container', // 放图表的 div 的 id.
     type: 'spline',        // 图标类型: 设置图表样式,可以为line,spline, scatter, splinearea bar,pie,area,column 默认为line
     animation: Highcharts.svg,
     // don't animate in old IE               
     // marginRight: 10,
     events: {  // 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数
        load: function() {}
     }
    

    },

    title: {

     text: "title name"  // 标题名
     // x: -20 //center设置标题的位置 
    

    },

    subtitle: {

     text: "title name"  // 子标题名, 基本配置和 title 一样
    

    },

    xAxis: { // X 轴

     type: 'datetime',
     tickPixelInterval: 100,
     tickInterval: TIME_INTERVAL  // 这是动态图的时间间隔.
    

    },
    // 与 x 轴相似, 若要配备两条, 能够如下配置: [] json 格式.
    yAxis: [{

     title: {},    
    

    },{

     title: {},
     opposite: true // Y轴分立两侧, 一个在左侧, 这个在右侧
    

    }],

    tooltip: { // 提醒音讯 (如 %,单位等)//鼠标移到图片上时展现的升迁框

     formatter: function() {    
         return '<b>'+ this.series.name +'</b><br />'+    
         this.x +': '+ this.y +'°C';    
     }    
    

    },

    legend:{ // 图例, 即 –图1 ++图2 ==图3 这种

     enabled: false
    

    },
    exporting: {// 导出Logo/打字与印刷….

     enabled: false
    

    },

    series: [{ // 数据, 就算有两条, 也即使json

     name: 'name',
     yAxis: 0  // 选择对应的y轴数据.
    

    },{

     name: 'name2',
     yAxis: 1
    

    }],

    credits: { // 关于版权消息

     enabled: true,    
     position: {//位置设置    
       align: 'right',    
       x: -10,    
       y: -10    
     },    
     href: "http://www.highcharts.com",//点击文本时的链接    
     style: {    
       color:'blue'    
     },    
     text: "Highcharts Demo"//显示的内容    
    

    }

  4. 将 第二步
    的多寡转载为一组 json 格式的数据, 然后直接成立 chart 图表,
    那样就有基本的静态图了. 动态图只是加了一步,
    按时更新数据参加到图片中而已.

    // 能够直接将上边的数据写成 json, 也足以一向用函数转化.
    var chart = new Highcharts.Chart({

     // 第2步 char 的配置, 都放到这里相对于是 一大串的json数据.
    

    })


以下为全部的实例(来自
新手教程
静态图):

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
       text: '月平均气温'   
   };
   var subtitle = {
        text: 'Source: runoob.com'
   };
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   

   var tooltip = {
      valueSuffix: '\xB0C'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };

   var series =  [
      {
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6]
      }, 
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5]
      }, 
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0]
      }, 
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];

   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;

   $('#container').highcharts(json);
});
</script>
</body>
</html>

1、通过回调函数获取

// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: ‘Live random data’
},
xAxis: {
type: ‘datetime’,
tickPixelInterval: 150
},
yAxis: {
title: {
text: ‘Value’
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}]
},
tooltip: {
formatter: function() {
return ‘<b>’+ this.series.name +'</b><br/>’+
Highcharts.dateFormat(‘%Y-%m-%d %H:%M:%S’, this.x) +'<br/>’+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: ‘Random data’,
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;

图片 2

[reference]

[1] 飛雲若雪. Highcharts 五个Y轴动态刷新数据[M]. (2014-03-18 19:52).
https://www.cnblogs.com/sydeveloper/p/3608588.html
[2] 天马3798. Highcharts的着力质量和方式详解[M]. (2015-07-24 10:08)
http://blog.csdn.net/u011127019/article/details/47036725
[3] runoob.com.
Highcharts 配置语法.
http://www.runoob.com

var chart = null;            // 定义全局变量

$(‘#container’).highcharts({

series: [{

name: ‘a’,

data: [1, 2, 3, 4]

}]

}, function(c){              // 回调函数,传递图表对象

chart = c;

});

for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});

图片 3

2、通过 new Highcharts.Chart()

});

图形中的数据纯属于DEMO的测验数据,未有实际用意。上面讲下大致的贯彻步骤

var chart2 = new Highcharts.Chart({

chart: {

renderTo: ‘container2’

},

series: [{

name: ‘a’,

data: [1, 2, 3, 4]

}]

});

console.log(chart2);

代码如下: $(function () {
$(document).ready(function() { Highcharts.setOptions({ global: { useUTC:
false } }); var chart; $(‘#container’).highcharts({ chart: {
typ…

图片 4

API
文书档案表明:http://api.hcharts.cn/highcharts\#Highcharts

首先步,下载而且引用JS包(highcharts.js),theme从名称想到所富含的意义是放皮肤的。

能够下载DEMO逐条试试就领悟效果如何了,上海教室就采取了五个样式。download中放的是打字与印刷和导出成图片的js文件(貌似是通过js上盛传官方网站,然后再下载到本地),因为品种是放置内网的所以就未有用了。

3、通过 Highcharts.charts 来获取

第二步,实现,贴代码。

 1 var chart;
 2         $(document).ready(function() {
 3             chart = new Highcharts.Chart({
 4                 chart: {
 5                     renderTo: 'container',          //放置图表的容器
 6                     plotBackgroundColor: null,
 7                     plotBorderWidth: null,
 8                     defaultSeriesType: 'line'   
 9                 },
10                 title: {
11                     text: 'JQuery曲线图演示'
12                 },
13                 subtitle: {
14                     text: '副标题'
15                 },
16                 xAxis: {//X轴数据
17                     categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'],
18                     labels: {
19                         rotation: -45, //字体倾斜
20                         align: 'right',
21                         style: { font: 'normal 13px 宋体' }
22                     }
23                 },
24                 yAxis: {//Y轴显示文字
25                     title: {
26                         text: '产量/百万'
27                     }
28                 },
29                 tooltip: {
30                     enabled: true,
31                     formatter: function() {
32                         return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
33                     }
34                 },
35                 plotOptions: {
36                     line: {
37                         dataLabels: {
38                             enabled: true
39                         },
40                         enableMouseTracking: true//是否显示title
41                     }
42                 },
43                 series: [{
44                     name: '杭州',
45                     data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
46                 }, {
47                     name: '江西',
48                     data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6]
49                 }, {
50                     name: '北京',
51                     data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6]
52                 }, {
53                     name: '湖南',
54                     data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
55 }]
56                 });
57             }); 

那写都以布署,最珍贵的正是series里面包车型客车数量了,假设急需从数据库中抽取来的话,直接生成json然后赋值上去就OK了,效果很炫,还应该有动态感,感兴趣的爱侣能够下载下来跑跑。

瞩目,DEMO里的download文件夹中的js文件,本来导出及打字与印刷的一对晋升是乌克兰语,作者早就修改成汉语了,在援用js文件的时候要求charset=”gb2312″,具体DEMO中自个儿一度写好了讲授。好的,到此结束。下载地址

console.log(Highcharts.charts);

Highcharts.charts是贰个数组,数组内容为页面上的有所的图形对象

API文书档案表达:http://api.hcharts.cn/highcharts\#Highcharts.charts

上述全数代码见:http://code.hcharts.cn/hcharts.cn/hhhG0a

发表评论

电子邮件地址不会被公开。 必填项已用*标注