场景:

开发一个大型热力图。官网示例中只有设置静态csv数据的例子。一直没有找到如何给热力图加载动态数据。

无奈,只好把要加载的数据拼接成csv格式后,供热力图加载。

拼接数据js:(dataArr是从后台获取的数据)

var csv_data = 'xColumn,yColumn,zColumn'+' \n '; // 列名
if(undefined != dataArr && null != dataArr && dataArr.length > 0){
for(var i=0;i<dataArr.length;i++){ // 遍历拼接每行数据
var thisrow = dataArr[i].xValue.toFixed(2) + ',' + // 四舍五入,保留两位小数
dataArr[i].yValue.toFixed(4) + ',' + // 四舍五入,保留四位小数
dataArr[i].zValue.toFixed(4) + ' \n ';
csv_data += thisrow;
}
}

options配置:

    var options = {
data: {
csv: csv_data
},
chart: {
// ...
},
// ...
};

生成图谱:

new Highcharts.Chart(options);

HighCharts-动态配置csv格式数据的更多相关文章

  1. Highcharts使用CSV格式数据绘制图表

    Highcharts使用CSV格式数据绘制图表 CSV(Comma-Separated Values,逗号分隔值文本格式)是採用逗号切割的纯文本数据.通常情况下.每一个数据之间使用逗号切割,几个相关数 ...

  2. Bash中使用MySQL导入导出CSV格式数据[转]

    转自: http://codingstandards.iteye.com/blog/604541 MySQL中导出CSV格式数据的SQL语句样本如下:   select * from test_inf ...

  3. R语言笔记001——读取csv格式数据

    读取csv格式数据 数据来源是西南财经大学 司亚卿 老师的课程作业 方法一:read.csv()函数 file.choose() read.csv("C:\\Users\\Administr ...

  4. postgresql数据库配置csv格式的日志输出

    postgresql数据库配置csv格风格日志输出 以下介绍postgresql数据库中关于csv格式日志(pg中一种比較具体的日志输出方式)的设置方法. 1.进入$PGDATA文件夹(pg的安装文件 ...

  5. Mongodb 导出json 和csv 格式数据

    导出到json: $ mongoexport.exe  -d TestDB -c TestCollection -o  ./test.json 导出到csv: If you want to outpu ...

  6. 使用Elasticsearch的processors来对csv格式数据进行解析

    来源数据是一个csv文件,具体内容如下图所示: 导入数据到es中 有两种办法,第一种是在kibana界面直接上传文件导入 第二种方法是使用filebeat读取文件导入 这里采用第二种办法 配置文件名: ...

  7. mysql导入导出.csv格式数据

    window下导入数据: LOAD DATA INFILE "C:\\1.csv" REPLACE INTO TABLE demo CHARACTER SET gb2312 FIE ...

  8. CSV格式数据如何导入SqlServer?

    一.使用微软数据库IDE管理软件:Microsoft SQL Server Management Studio 1.标准的CSV文件格式如下: 2.建数据表 3.在需要导入的数据库右键点击“任务”,选 ...

  9. CSV格式数据如何导入MySQL?

    经常有客户咨询如何将CSV文件导入到MySQL数据库中,特写此文介绍一种方便.快捷的方法. 我们要使用的辅助工具是著名的MySQL管理软件:Navicat for MySQL 1)我准备了一个字符编码 ...

随机推荐

  1. [Visual Studio] 自定义类模板

    1.找到vs2015/vs2012/vs2017的安装目录下:Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 2.打开Class.cs文件 using ...

  2. 大数据实践:ODI 和 Twitter (二)

    大数据实践:ODI和Twitter(二) 在前面的文章中,我们已经使用flume将数据从twitter抓取到Hive中,现在我们来看看ODI(Oracle Data Integrator)如何在HIV ...

  3. spring cloud:Edgware.RELEASE版本中zuul回退方法的变化

    Edgware.RELEASE以前的版本中,zuul网关中有一个ZuulFallbackProvider接口,代码如下: public interface ZuulFallbackProvider { ...

  4. 动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性;被无法Tab激活焦点,增加 WS_TABSTOP 属性(转)

    动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性:被无法Tab激活焦点,增加 WS_TABSTOP 属性. CEdit m_editUrl; // ES_AUTOHSCRO ...

  5. ZwQuerySystemInformation枚举内核模块及简单应用

    简单说,即调用第11号功能,枚举一下内核中已加载的模块.部分代码如下://功能号为11,先获取所需的缓冲区大小ZwQuerySystemInformation(SystemModuleInformat ...

  6. IIS6 2.0 4.0 冲突解决 'c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\xxx' -- 'Access is denied. '

    今天在阿里云虚拟机上部署新站点后出现下面的错误: Compiler Error Message: CS0016: Could not write to output file 'c:\Windows\ ...

  7. tmux分屏幕

    1. tmux  a  -t  fly 连接上tmux 2. 左右分屏幕,ctrl+a ,再按% 上下分屏: ctrl+a, 再按“ 切换屏幕: ctrl+a, 再按o 关闭终端: ctrl+a, 再 ...

  8. SQL 中的多条件查询

    在应用程序开发中,多条件查询是个经常遇到的情况,最简单最麻烦的方法是把所有的可能情况都考虑到,但是无疑是繁琐的,而且很容易漏掉可能的情形,下面是SQL语句实现多条件查询的情况 select * fro ...

  9. [Aaronyang] 写给自己的WPF4.5 笔记17[Page实现页面导航]

    1. 第一个Page页使用 新建PageDemo解决方案,默认wpf应用程序 右键项目新建页,然后指定App.xaml的默认启动窗口,为Page1.xaml,F5运行项目 文章内容已经迁移http:/ ...

  10. Xmpp获取离线消息

    文章只是选取了其中一段,无XMPP基础的人可能看起来有点复杂; 假设我们注册了一个用户,用户名叫shimiso,那么我们如何让shimiso这个用户一登陆就取到离线消息呢? PPConnection. ...