用Highcharts画图时,经常需要更新所画的图表,最常见的就是改变数据以更新图表。在Highcarts中,数据对应的参数是series。这儿就以图1的柱状图为例,列举如何更新series的5种方法,以供参考。源代码可从这儿访问。

图1

1. series.update

Highcarts图表中,可以有多个series。当我们想更新其中某一个series时,可以直接调用其update方法。效果如图2所示。
chart.series[0].update({
data: [29.9, 71.5, 306.4, 429.2, 144.0, 176.0, 135.6, 248.5, 216.4, 194.1, 95.6, 54.4]
});

图2

2. chart.update

如果想一次性更新多个series,那么就可以直接使用chart.update。除了series,其他参数也可以同时进行更新。要注意的是,chart.update只允许更新原来的series,不允许新增series。比如在这个例子里,只能更新原来的一个或两个series,哪怕多加series,也不会起作用。效果如图3所示。
chart.update({
series: [{
type: 'column',
name: 's1',
data: [129.9, 171.5, 306.4, 429.2, 144.0, 176.0, 135.6, 248.5, 216.4, 194.1, 95.6, 54.4]
},{
type: 'column',
name: 's2',
data: [69.9, 51.5, 176.4, 121.2, 124.0, 476.0, 935.6, 248.5, 266.4, 191.1, 99.6, 53.4]
}]
});

图3

3. chart.addSeries

如果想要新增series,就得使用chart.addSeries了。一次只能加一个series。注意这个方法有性能问题,当series的长度很长, 且一次性加好多series的时候,图表的反应会很慢。效果如图4所示。

chart.addSeries({
type: 'column',
name: 's3',
data: [129.9, 171.5, 1106.4, 1129.2, 144.0, 176.0, 135.6, 1148.5, 216.4, 194.1, 95.6, 54.4]
});

图4

4. series.remove & chart.addSeries

当我想完全替换原来的series,而不仅仅是在上面做更新和新增的时候,可以采用series.remove和chart.addSeries结合的方法。也就是说,要先去掉所有原来的series,再逐个加入新的。同样,这个方法有性能问题。效果如图5所示。

seriesData = [{
type: 'column',
name: 's1 new',
data: [234.9, 171.5, 1106.4, 1129.2, 144.0, 176.0, 135.6, 1148.5, 216.4, 194.1, 195.6, 454.4]
}];
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < seriesData.length; i++) {
chart.addSeries(seriesData[i]);
}

图5

5. series.remove/chart.addSeries & chart.update

第4种方法由于使用了chart.addSeries,导致性能上可能会出现问题。这儿就用一种替换的方法来实现同样的效果。关键就是要比较原来series的数目和新的series的数目,当两个数目不同时,通过series.remove或者chart.addSeries使其相等,再统一调用一次chart.update实现图表的更新。源代码如下。当新的series数目大于原来的时候,效果如图6所示。
seriesData = [{
type: 'column',
name: 's1 new',
data: [234.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 454.4]
},{
type: 'column',
name: 's2 new',
data: [234.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 454.4]
},{
type: 'column',
name: 's3 new',
data: [234.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 454.4]
}]; var diff = chart.series.length - seriesData.length;
if(diff > 0){
for (var i = chart.series.length; i > seriesData.length; i--){
chart.series[i-1].remove(true);
}
} else if (diff < 0){
for (var i = chart.series.length; i < seriesData.length; i ++){
chart.addSeries({});
}
} chart.update({
series:seriesData
});

图6

Highcharts中更新series的5种方法的更多相关文章

  1. Android 在子线程中更新UI的几种方法

    第一种: new Handler(context.getMainLooper()).post(new Runnable() { @Override public void run() { // 在这里 ...

  2. Android子线程中更新UI的4种方法

    方法一:用Handler 1.主线程中定义Handler: Handler mHandler = new Handler() { @Override public void handleMessage ...

  3. 老问题:Android子线程中更新UI的3种方法

    在Android项目中经常有碰到这样的问题,在子线程中完成耗时操作之后要更新UI,下面就自己经历的一些项目总结一下更新的方法: 方法一:用Handler 1.主线程中定义Handler: Handle ...

  4. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  5. C#中实现并发的几种方法的性能测试

    C#中实现并发的几种方法的性能测试 0x00 起因 去年写的一个程序因为需要在局域网发送消息支持一些命令和简单数据的传输,所以写了一个C/S的通信模块.当时的做法很简单,服务端等待链接,有用户接入后开 ...

  6. PHP中获取星期的几种方法

    PHP中获取星期的几种方法   PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...

  7. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  8. 关于iOS去除数组中重复数据的几种方法

    关于iOS去除数组中重复数据的几种方法   在工作工程中我们不必要会遇到,在数组中有重复数据的时候,如何去除重复的数据呢? 第一种:利用NSDictionary的AllKeys(AllValues)方 ...

  9. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

随机推荐

  1. Version 1.5 of the JVM is not suitable for this product.Version:1.6 or greater is required

    近期在公司涉及到了服务器等的扩展,smartfoxserver扩展使用的Eclipse,尽管没学过java.可是咱毕竟是C++起价的,其它语言看看也就会了,项目依然做着,近期看到某同学有一些java的 ...

  2. Oracle 11g Enhancements in AWR Baselines

    Enhancements in AWR Baselines A baseline is any set of snapshots taken over a period of time. The sn ...

  3. 002-maven修改仓库以及镜像地址

    1.将下载好的maven,修改配置 <localRepository>G:\mavenrepository-idea</localRepository> 2.修改增加镜像地址 ...

  4. SUBMIT RM07DOCS【MB51】 获取返回清单,抓取标准报表数据

    *&---------------------------------------------------------------------* *& Report YT_SUBMIT ...

  5. python基础23 -----进程和线程

    一.进程 1.什么是进程? 1.1 进程就是一个程序在一个数据集上的一次动态执行过程.进程一般由程序.数据集.进程控制块三部分组成. 1.2 程序是指进程需要完成那些功能以及如何完成. 1.3 数据集 ...

  6. XP、win7下Excel 2007多窗口打开Excel的解决方法

    http://blog.x6x8.com/?p=330 Win7下的方法(借鉴了XP的方法): 1.先在桌面先建一个txt文件,将下面的代码复制进去 32位WIN7复制下面一行start “Excel ...

  7. 2015.6.30 反弹的教训(想做T)

    心路:在6.29号,市场连续大跌!我到6.29号才想到可以做T+0.6.30消息面已经利好(双降准),已经计划做T+0(X先买后卖).  开市大跌至跌停.午后所有股票开始反弹.但是上午跌停时不敢入市, ...

  8. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

  9. range开始节点和结束节点

    sc = range.startContainer, so = range.startOffsest ec = range.endContainer, eo=range.endOffset   sta ...

  10. PAT 天梯赛 L1-009. N个数求和 【模拟】

    题目链接 https://www.patest.cn/contests/gplt/L1-009 思路 每一步每一步 往上加,但是要考虑 溢出,所以用 LONG LONG 而且 每一步 都要约分 才能保 ...