HighCharts 后台加载数据的时候去掉默认的 series

Highcharts之动态刷新——结合后台数据 【若要转载  请标明出处  http://raising.iteye.com/blog/2214779】   最近要求做前台的一些东西,用到了Highcharts。。其实在Highcharts中文网上有相应的演示demo,一般你所需要的图的样式都可以找到。难点在于实际开发中,需要的数据往往是要结合后台请求并响应的数据的。 附Highcharts中文网: http://www.hcharts 阅读详情
var chart;

var options = {
    chart: {
        renderTo: 'container',
        type:'line'
    },
    title: {
        text: '历史趋势时序图',
        x: -20 //center
    },
    xAxis: {
        events : {afterSetExtremes : loadDate },
        categories: []
    },
    yAxis: {
    	title: { text: '测点峰值历史趋势' },
        min: 0,
        max: 100
    }
    //series: [{}]
};

$(document).ready(function(){
	// 获取测点数据
	loadSensor();
	
	var series = {
		yAxis: 0,
		name: "默认测点"
	};//这里是关键
		
	chart = new Highcharts.Chart(options);
	chart.addSeries(series);
    
    $("#btn_sure").click(function(){
		loadDate();

	});
    
    // 时间设置
    jQuery('#startDate, #endDate').datetimepicker({
        timeFormat: "hh:mm:ss",
        dateFormat: "yy-mm-dd"
    });
});

// 获取数据
    function loadDate() {
        
        var startDate = $.trim($("#startDate").val());
        var endDate = $.trim($("#endDate").val());
        var sensor = $.trim($("#sensor").val());
        chart.showLoading('正在加载数据...');
        
        $.ajax({
            url : 'jsonDiagno/jsondiagno_history.do?startDate='+startDate+'&endDate='+endDate+'&sensor='+encodeURI(encodeURI(sensor)),
            type : 'POST',
            dataType : 'json',
            contentType: "application/x-www-form-urlencoded; charset=utf-8", 
            success : function(data) {
            
                var series = {
                    yAxis: 0,
                    name: sensor,
                    data: data.rows
                };//加载数据的时候把之前的覆盖掉
                
                chart = new Highcharts.Chart(options);
                chart.addSeries(series);
            
            }
        });
    }


1. 初始化的时候

2. 加载数据的时候

highcharts一个charts加载多个id,循环charts并动态加载series数据 PS:因為在工作中經常會用的這個插件,所以做個日常歸納方便自己查閱,也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式,希望也能幫助大家,謝謝,如有雷同純屬巧合,慢慢完善中。 因为公司需求要在一个页面加载多个图表,如果一个id写一个图表的话,不知道要写多少代码,所以就开始简化代码之路;而且series里面的数据需要动态加载,我也不知道会加载多少数据,所以,能简化就简化吧,在此给大家分享一下... 阅读详情

相关推荐

残差检验_第三十讲 R语言-Cox比例风险模型的假设检验条件

在介绍完 Cox比例风险模型的详细理论和R实现以后(插入链接!!!),我们已经知道Cox比例风险模型可以较好的同时矫正多个混杂因素对结果的影响,同时我们遗留下来了一个问题:Cox比例风险模型的假设检验条件是什么?这一讲,我们将对此进行解答。请注意,如果使用不当,统计模型可能会产生误导性的结论。因此,检查给定的模型是否适合数据类型是非常重要的!1. Cox比例风险模型的假设条件Cox比例风险模型的成...

weixin_35476698的博客 8048

echarts 隐藏掉series 其中的一条

你可以试试设置lineStyle的颜色是透明的,线宽是0:series: [{ name: '...', type: 'line', symbolSize: 0, // symbol的大小设置为0 showSymbol: false, // 不显示symbol lineStyle: { width: 0, // 线宽是0 co...

qq_18972767的博客 2万+

fins协议握手信号服务器响应,欧姆龙FinsTCP与FinsUDP协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析附含报文模拟器等...

前言 – Fins欧姆龙这个协议网上极少有相关的模拟器、Tcp的这一块倒是有但是Udp的基本都是不可用1、 Fins协议结构也很简单 协议分为两种 一种tcp一种udp2、 Tcp比Udp的报文会多一层tcp的head头部3、 Udp回应报文在Wireshark中是解析不到(因为他按照UDP的格式去解那指定是解不到)好长时间没有更新过博客了、也比较懒= = 。一、Read(TCP)发包那么这个就很...

weixin_32491317的博客 4443

HighCharts 序列series默认隐藏

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],   visible: false //当前序列数据初始化时是否显示 }, {   na...

weixin_30411997的博客 828

ZYNQ学习:PL端DDR3 读写测试

DDR SDRAM 的最大特点是双沿触发,即在时钟的上升沿和下降沿都能进行数据采集和发送,同样的工作时钟, DDR SDRAM 的读写速度可以比传统的 SDRAM 快一倍。本次实验使用的 DDR3 芯片是南亚的 NT5CC256M16ER-EKI, NT5CC256M16ER-EKI 的 bank 位宽为 3,行位宽为 15,列位宽为 10,所以它的地址大小等于 2^3*2^15*2^10(即 2^28=256M),数据位宽为 16bit,所以容量大小为 256M*16bit,也就是 512MByte。

shuidiQAQ的博客 3035

h5支付不能打开支付宝 ios_iOS支付宝H5支付无法返回APP解决方案

本文前大段在讲楼主是如何解决这个问题的,以及中间遇到的麻烦。赶时间的同学可以直接看最后的 最终解决方案。在讨论之前,我们先看看官方文档上的一句话:注意:在iOS系统中,唤起支付宝App支付完成后,不会自动回到浏览器或商户APP。用户可手工切回到浏览器或商户APP;支付宝H5收银台会自动跳转回商户return_url指定的页面。what? 官方直接跟我们说GG了?楼主不甘心,还是想尝试一下。借鉴之前...

weixin_39864101的博客 856

vue中echarts关系图动态增删节点以及连线

首先,echarts的关系图有个非常坑的地方,就是节点的id必须连续,否则增删之后节点无法连接!下面是简单的演示实现,实际要用动态增删的话,要复杂的多得多。我是用的关系图是力引导图更新后不会重新渲染,只是动态增加的效果...

JosiahH的博客 2023

S32DS 3.5.8离线包怎么用?保姆级教程教你手动安装S32K3开发环境(附资源下载)

本文详细介绍了S32DS 3.5.8离线包的安装方法,适用于S32K3开发环境的手动搭建。从资源获取、完整性验证到分步安装指南,提供了全面的离线部署解决方案,特别适合军工/车企内网开发等场景。文章还包含版本选择建议、常见问题排查及团队协作方案,帮助开发者高效完成环境配置。

weixin_30471561的博客 480

highchars 隐藏数据名称

series: [{ showInLegend: false, //隐藏数据名称 name: 'Series', colorByPoint: true, data: [40, 38, 72, 35, 36, 68, 50, 58, 55], labels: { borderStyle: 'solid', borderCol...

jpjp2020的博客 1621

Cloudflare SaaS 优选IP实战:提升大陆访问速度的配置指南

本文详细介绍了如何通过Cloudflare SaaS优选IP提升中国大陆用户访问速度的配置指南。从基础环境准备到IP筛选方法,再到完整配置流程和效果验证,帮助用户突破免费套餐限制,精准优化网络线路,特别适合跨境电商和面向中国大陆用户的网站优化。

weixin_29231027的博客 689

PyCharm 怎么不升级直接使用Jupyter Notebook

在PyCharm 中需要升级到 PyCharm Professional 版本,才能直接使用 Jupyter Notebook。从截图来看,Jupyter Notebook 已经成功启动,并且正在运行。这将在默认网络浏览器中打开一个新的标签页,显示文件浏览器界面。可以在这里创建和编辑。文件添加到 PyCharm 项目中,并使用纯文本编辑功能进行修改。支持与外部工具集成,可以配置它以调用命令行工具或脚本来启动。,参数可以根据需要设置,工作目录设置为项目根目录。,你仍然可以在本地环境中安装和运行。

Davina_yu的博客 999

echart中隐藏series中的默认name

直接上代码 series: [ { name: '访问来源', //这里本来是需要展示 ,如下图 type: 'pie', radius: [0,'70%'], center: ['50%', '50%'], //label图形上的文本标签 formatter标签内容格式器 可以扩展内容 label: {formatter: '{b}: {@2012} ({d}%)'}, colo

各位看官欢迎来到webshao,点个赞支持下咯! 1万+

手把手教你双目测距理论及生成视差图,深度图,点云图像

Stereo Vision, 也叫双目立体视觉,它的研究可以帮助我们更好的理解人类的双眼是如何进行深度感知的。双目视觉在许多领域得到了应用,例如城市三维重建、3D模型构建(如kinect fusion)、视角合成、3D跟踪、机器人导航(自动驾驶)、人类运动捕捉(Microsoft Kinect)等等。双目测距也属于双目立体视觉的一个应用领域,双目测距的基本原理主要是三角测量原理,即通过视差来判定物体的远近。

qq_53545309的博客 2280

Highcharts中更新series的5种方法

用Highcharts画图时,经常需要更新所画的图表,最常见的就是改变数据以更新图表。在Highcarts中,数据对应的参数是series。这儿就以图1的柱状图为例,列举如何更新series的4种方法,以供参考。源代码可从这儿访问。 图1 1. series.update Highcarts图表中,可以有多个series。当我们想更新其中某一个series时,可以直接调用其updat

沧海一粟 —— 技术随手记 4万+

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

HighCharts趋势图动态设置Series数组(根据后台决定具体几个data), 并动态刷新数据

最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图,涉及到series数组动态设置, 动态刷新 . 为了便于记忆,在这里记录一下。

CHEN的技术积累 2万+

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

Highcharts中更新series

$.ajax({ type : "post", url : '{:URL("getCount")}', data : {'date':e}, async : true, success : function(data) { console.log...

m0_37711659的博客 354

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Highcharts数据列(Series)

数据列配置是 Highcharts 最复杂也是最灵活的配置,如果说 Highcharts 是灵活多变,细节可定制的话,那么数据列配置就是这个重要特性的核心; 一、什么是数据列 数据列是一组数据集合,例如一条线,一组柱形等。图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提

qq_15977097的博客 1933

Highcharts系列翻译之十四:Series数据列选项

Highcharts系列翻译之十四:Series数据列选项 series数据列选项   参数 描述 默认值 data 参见data 数据项   dataParser 已过期。http://www.highcharts.com/documentation/how-to-use nu

Transform 2976

Highcharts 操作series 的data里的数据

在绘制highcharts 散列图的时候遇到诸如 series: [{                 name: '行政部',                 color: 'rgba(223, 83, 83, .5)',                 data: [[67.5, 59.0,‘张三’] , [67.5, 59.0,'李四'], [59.5, 49.2,'王五'], [57

u013955308的专栏 2980

Highcharts 柱形图,线条图,饼图组合

设置 series 的 type 属性为 column/line/pie ,series.type 描述了数据列类型。默认值为 "line"。color: Highcharts.getOptions().colors[0] // Jane 的颜色。color: Highcharts.getOptions().colors[1] // John 的颜色。color: Highcharts.getOptions().colors[2] // Joe 的颜色。name: '总消费',html: '水果消费',

2501_90421329的博客 763

Highcharts 动态生成series

Highcharts 动态生成series 场景 工作中遇到需要动态创建折线图,并赋值,并非后台组装直接data:data,需要格式化数据,并动态组装 代码如下 后端(JAVA) LineChart lineChart = new LineChart(); lineChart.setProName(&quot;小黑&quot;); lineChart.setProData(&quot;[4,7,-5,5,9]&quot;); Lin...

Genius only means hard-working all one's life. 1354

Highcharts使用中关于series超过11个的BUG

js脚本: $(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Stacked column chart' }, xAxis: {

Paladin的专栏 2494

highcharts 如何获取series 里name属性的名称_Pandas数据结构之Series

Series 类似多维数组Series 类似字典矢量操作与对齐 Series 标签名称属性本节介绍 Pandas 基础数据结构,包括各类对象的数据类型、索引、轴标记、对齐等基础操作。首先,导入 NumPy 和 Pandas:In[1]:importnumpyasnpIn[2]:importpandasaspd“数据对齐是内在的”,这一原则是根本。除非显式指定,Pand...

weixin_39915367的博客 2033

如何在Vue 3项目中快速集成Highcharts-Vue?5分钟上手教程

Highcharts-Vue是官方推出的Highcharts与Vue框架集成方案,专为Vue 3项目设计,能帮助开发者轻松实现数据可视化功能。本教程将带你通过简单步骤完成集成,即使是Vue新手也能快速掌握。 ## 📋 准备工作:环境要求 在开始前,请确保你的开发环境满足以下条件: - Node.js和NPM已全局安装 - Vue 3项目已创建(推荐使用Vue CLI或Vite构建) - Hi

gitblog_00892的博客 883
上一篇: 不要再逼我们去见旧情人
下一篇: MySQL 获得当前日期时间\时间戳 函数
JavaAlpha
博客等级 码龄18年 910粉丝 511原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值