正文 

当前位置： 首页 > java > java教程

highcharts-动态配置csv格式数据

迷失之路 迷失之路     2022-09-01     606

关键词：

场景：

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

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

 

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

var csv_data = ‘xColumn,yColumn,zColumn‘+‘ 
 ‘; // 列名
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) + ‘ 
 ‘;  
        csv_data += thisrow;
    }
}

 

options配置：

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

 

生成图谱：

new Highcharts.Chart(options);

 

highchart数据动态更新

highChart官网上通过ajax加载数据的例子上面是第一次生成图表的时候使用 我想动态更新，在已经生成的图表上动态更新chartBS.series[0].setData(sugarListDataBefore);chartBS.series[0].name=beforeTimeName;chartBS.series[1].setData(sugarListDataAfter);cha 查看详情

highcharts之动态数据

...项目中需要用到图表，找了几个开源框架，最后选择 Highcharts，原因是 Highcharts功能强大，稳定，方便，而且开源，社区比较成熟。 首先下载 Highcharts，导入项目。 在HTML页面引入相应的Js文件。我这个项目是情... 查看详情

怎么使用ajax动态给highcharts的series属性赋值

参考技术Aajax请求后台数据，将返回数据在后台转换为json格式，然后前台接受到json字符串后直接设置到series里面如下代码示例series:[...data:json,...]后台转json可以用JSONObject或者JSONARRAY 查看详情

如何在highcharts中设置动态数据

】如何在highcharts中设置动态数据【英文标题】：howtosetdynamicdatainhighcharts【发布时间】：2012-07-3107:14:31【问题描述】：我从servlet获取数据，我从servlet发送的json对象的sysout是"jsonArray":["bugzilla":20,"redmind":14]现在我的java脚本是<scri... 查看详情

Jmeter 动态 JMS 队列名称值不会从 CSV 数据配置中更新

】Jmeter动态JMS队列名称值不会从CSV数据配置中更新【英文标题】：JmeterDynamicJMSqueuenamevaluesarenotupdatedfromCSVDataConfig【发布时间】：2021-12-2908:41:00【问题描述】：我正在尝试使用JmeterJMS执行性能测试，我有一个csv文件以表格形式提... 查看详情

highcharts基本配置和使用highcharts做手机端图标

使用highcharts三个理由：1》手机适配2》大数据的支持3》svg的优势缺点：不开源、学习资料少官方有基本的常规用法，一般都是基于jquery写的例子，也可以自己封装函数，用原生来调取，性能简单测试一下，没发现两者有什么大... 查看详情

图表插件highcharts的动态化赋值，实现图表数据的动态化设置显示(代码片段)

在很早之前就介绍过图表插件Highcharts的使用了，在2014年的随笔《基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts》，这里基本上都介绍的比较完整，基本的设置也没有太大的差异，本篇介绍的是基于Bootstrap开发... 查看详情

highchart柱状堆叠图动态数据请求

$(function(){varoptions={chart:{renderTo:‘indoor‘,type:‘column‘,},title:{text:‘室内问题‘},xAxis:{categories:[‘MR弱覆盖楼宇‘,‘高2无4‘,‘2G高倒挂‘,‘投诉‘,‘保障需求‘,‘市场需求‘],labels:{rotation:0}},yAxis:{max:1000,min:0,title:{ 查看详情

highcharts动态获取数据生成图表问题

 动态获取数据说白点就是从后台传值到前台，前台把这些值赋值给x轴与y轴。 柱状图的动态传值：//获取后台数据varx=[];//X轴vary=[];//Y轴 varxtext=[];//X轴TEXT varcolor=["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5ACD","#0000FF... 查看详情

将数据库中的数据格式化为 Highcharts 系列格式

】将数据库中的数据格式化为Highcharts系列格式【英文标题】：FormatdatafromdatabasetoHighchartsseriesFormat【发布时间】：2017-12-1721:09:15【问题描述】：我有来自数据库的数据vardata=["plants_ref_id":"1","plant_name":"MCW","employees_data":"1,1,21,21","plan... 查看详情

如何创建动态更新样条 Highcharts 图表？

】如何创建动态更新样条Highcharts图表？【英文标题】：HowtocreatedynamicupdatesplineHighchartschart?【发布时间】：2019-03-0819:31:06【问题描述】：我在没有运气的情况下摸索了几天。我想创建显示数据库中数据的Highcharts图表。我做了一些... 查看详情

highcharts动态图

 Highcharts动态图 每秒更新曲线图chart.eventschart.event属性中添加load方法（图表加载事件）。在1000毫秒内随机产生数据点并生成图表。chart:{events:{load:function(){//图表每秒更新一次varseries=this.series[0];setInterval(function(){varx=(newDate... 查看详情

angularjs+highcharts开发

1、angularjs+highcharts,highcharts的引入要通过指令的方式，要引入highcharts-ng.js文件，但是要注意此文件的中的数据格式。{options:{},series:{}},options包括了大部分的配置，series是图表数据 2、在html页面中可直接写写入：<highchartseries... 查看详情

如何为highcharts创建Json格式的数据

】如何为highcharts创建Json格式的数据【英文标题】：HowtocreatedatainJsonformatforhighcharts【发布时间】：2017-12-1112:54:53【问题描述】：我通过ajax得到低于结果，而我在ajax成功中得到的数据是["plants_ref_id":"1","plant_name":"MCW","employees_data":"... 查看详情

使用 json 格式的数据制作 highcharts 图表，带有 4 元素数组

】使用json格式的数据制作highcharts图表，带有4元素数组【英文标题】：makehighchartsgraphwithdatainjsonformat,with4-elementarray【发布时间】：2020-12-1210:17:20【问题描述】：json数据属于这种类型：[["SSLCertificateSignedUsingWeakHashingAlgorithm",4500,"98... 查看详情

highcharts动态显示多条实时曲线，怎么初始化数据

参考技术A$(function()$(document).ready(function()Highcharts.setOptions(global:useUTC:false);varchart;$('#container').highcharts(chart:type:'spline',animation:Highcharts.svg,//don'tanimateinoldIEmarginRight:10,events:load:function()//setuptheupdatingofthecharteachsecondvarseri... 查看详情

Highcharts yAxis.max 动态管理刻度间隔

】HighchartsyAxis.max动态管理刻度间隔【英文标题】：HighchartsyAxis.maxmanagetickintervalsdynamically【发布时间】：2020-03-3012:43:18【问题描述】：我正在尝试根据数据动态设置y值的最大值和最小值，但它对某些值有一些问题。我认为highchart... 查看详情

使用 MySQL 为 HighCharts 每月格式化 JSON 数据

】使用MySQL为HighCharts每月格式化JSON数据【英文标题】：FormattingJSONdatamonthwiseforHighChartsusingMySQL【发布时间】：2015-08-0620:28:39【问题描述】：有两张桌子。第一张表显示了一名护士手下的孕妇人数。请记住，有许多护士隶属于一名... 查看详情