Hightcharts动态创建series
第一种方法：
申明options时动态设置series，然后再创建chart对象
代码如下：
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: '每天的分布情况',
x: -20 //center
},
xAxis: {
categories: ['0', '1', '2', '3','4','5','6','7','8','9']
},
yAxis: {
title: {
text: 'Y轴'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>' + this.x +': '+ this.y ;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
options.series = new Array();
var i;
for(i=0;i<10;i++)
{
options.series[i] = new Object();
options.series[i].name = 'Sample'+i;
options.series[i].data = new Array(0+i, 1+i, 2+i, 3+i,4+i,5+i,6+i,7+i,8+i,9+i);
}
chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>
第二种方法：
采用chart.addSeries方法进行动态创建series，这种方法适用更广，可用于Ajax数据动态绘制图形
根据API对该方法的说明，可以看到该方法可以在调用时传入一个 plotOptions.series 对象。
addSeries (Object options, [Boolean redraw], [Mixed animation])
Add a series to the chart after render time. Note that this method should never be used when adding data synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the same time as the chart is initiated, add the series as a configuration option instead. 参数列表： options: Object
The series options, as documented under plotOptions.series and under the plotOptions for each series type.
redraw: Boolean
Defaults to true. Whether to redraw the chart after the series is added. See the redraw() method below.
animation: Mixed
Defaults to true. When true, the series' updating will be animated with default animation options. The animation can also be a configuration object with properties duration and easing.
返回值 Series
具体代码：
var serieOptions = {
spline: {
marker: {
radius: 4,
lineColor: '#000000',
lineWidth: 1
}
},
series: {
lineWidth:1
}
};
var series = chart.addSeries(serieOptions, false);
series.setData([1,2,3,4,5],false);
chart.redraw();
注：对series操作的一些小说明
（1）首先、无论是highcharts还是highstock,chart.options.series表示的是图形的主要显示部分，个数是多少就有几条线，(饼图除外，跟这个不一样)，所以如果要对series进行操作的话，可以通过chart.options.series的操作来完成。
（2）另外对series的操作也可以通过chart.series来完成。如果是highcharts的话操作跟上面一样，如果是highstock的话，需要注意，chart.series可能会包含图形下面navigator的图形，也就是chart.series的个数比chart.options.series的个数多1，这时对chart.series操作需要把navigator考虑进去，以免发生错误。
如果highstock画柱形图的话，跟（1）一样操作就可以，如果是line或者其他图形的时候，chart.series个数比chart.options.series多1
例如：chart.series[i].name = chart.opions.series[i].name//如果后面这个设置name属性
chart.series[i].data = chart.options.series[i].data
如果是饼图的话：使用chart.options.series[0].data来获取饼图各部分的信息，或者chart.series[0].points来获取饼图各部分的信息
Hightcharts动态创建series的更多相关文章
- c# Chart 服务器端动态创建ChartArea
1 aspx <x:ContentPanel ShowBorder="true" ShowHeader="false" ID="ContentP ...
- JavaScript dom 动态创建标记
此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...
- ios动态创建类Class
[Objective-C Runtime动态加载]---动态创建类Class 动态创建类Class,动态添加Class成员变量与成员函数,动态变量赋值与取值,动态函数调用等方法 a.使用objc_al ...
- winform 用户控件、 动态创建添加控件、timer控件、控件联动
用户控件: 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗 ...
- python动态创建类的声明
动态创建类的声明 使用内置函数type,原型:class type(name, bases, dict)name是类的名字,相当于__class__bases是类的基类,元组,可以有多个基类,但是基类 ...
- Python 动态创建函数【转】
知乎上也有相似的问题 偶然碰到一个问题,初想是通过动态创建Python函数的方式来解决,于是调研了动态创建Python函数的方法. 定义lambda函数 在Python中定义lambda函数的写法很简 ...
- WinForm用户控件、动态创建添加控件、timer控件--2016年12月12日
好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3 0 0 用户控件: 通过布局将多个控件整合为一个控件,根据自己的需要进行修改,可对用户控件内的所有控件及控件属性进行修 ...
- 动态创建DAL层类的实例
为了可扩展性,方便以后对于代码的修改维护,使用动态创建DAL层对象. 1.首先在webconfig中的configuration下添加配置项 <appSettings> <add k ...
- [转]android：动态创建多个按钮 及 批量设置监听
之前投机取巧,先创建好多个按钮,再根据需要的数量进行部分隐藏,不过还是逃不过呀. 这样根本无法批量地 findId,批量地 设置监听. 所以今天还是认认真真地研究回“动态创建按钮”,终于,通过不断尝试 ...
随机推荐
- WIN10 新建ORACLE实例
1 管理员身份进入CMD环境,执行DBCA命令,在弹出窗口的引导中,完成实例创建 2 如果在创建过程中没有选择适当的字符集(最好采用默认字符集),如下图所示,在进入PLSQL DEVELOPER的时候 ...
- PostgreSQL简单介绍
自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...
- WPF 多语言实现
很多国际化的程序都提供了多语言的选项,这样方便不同国家的使用者更方便的使用软件.这篇博客中将介绍在WPF中实现多语言的方式. 方式一,使用WPF动态资源的方式实现.先简单介绍下StaticResour ...
- 配置ogg异构oracle-mysql（3）目的端配置
目的端配置大致分为如下三个步骤:配置mgr,配置checkpoint table,配置应用进程 在目的端先创建一张表,记得带主键: mysql> create database hr;Query ...
- 高效jQuery的奥秘
讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...
- html table之 全选，全不选
就是这个小功能让我和组长引发争端,就是这个小功能让我差点"被"辞职,就是这个自封装的js方法让我放下了对组长的敬畏之心,现在分享一下,其实也很简单,但是真的有这么简单吗? < ...
- js获取今天明天
目的:记录中展现"今天","明天",除外展现月日. 借鉴: <html> <head> <meta http-equiv=&quo ...
- ce游戏内存修改器(Cheat Engine)
ce修改器(Cheat Engine)一款专门修改内存修改编辑的游戏工具它包括16进制编辑,反汇编程序,内存查找工具新版6.1 版的CE与6.0 最大的区别就是添加了修改器制作工具,比之前 5.6.1 ...
- WebAPI身份验证
对WebAPI接口的开放当然要做控制,需要身份验证如何做到呢. 进行身份验证后的 服务器拒绝了访问! 第一步添加一个CustomHandler.cs的类 1: using System; 2: usi ...
- Android 6.0权限
在android 6.0 Marshmallow版本之后,系统不会在软件安装的时候就赋予该app所有其申请的权限,对于一些危险级别的权限,app需要在运行时一个一个询问用户授予权限. 只有那些targ ...