关键词：
【中文标题】如何创建动态更新样条 Highcharts 图表？【英文标题】：How to create dynamic update spline Highcharts chart? 【发布时间】：2019-03-08 19:31:06 【问题描述】：我在没有运气的情况下摸索了几天。 我想创建显示数据库中数据的 Highcharts 图表。 我做了一些图表没有问题，但我卡在显示一些点（20 或更多）的图表上，并将样条图滚动到左侧显示新数据。
我创建了两个数组 jfDatumi（包含来自数据库的 hh:mm 格式的时间）(12:10) 和包含温度值 (-2.3...) 的 jfTempOuts。
现在我想在图表上显示这些数据，这些数据每秒移动一次，增加新的点（时间、温度），但当时只显示 20 个点。 当涉及到数组的末尾时，我希望图表从第一点重新开始。 就像这张图表https://www.highcharts.com/demo/dynamic-update 但我希望 X 轴从我的数组 (jfDatumi) 中显示我的时间而不是当前时间（没有 var x = (new Date()).getTime())
谁能帮帮我？因为这个，我正在拔头发。 以下是我当前的代码。
$(function ()
$(document).ready(function ()
Highcharts.setOptions(
global:
useUTC: false,
);
$('#test').highcharts(
credits:
text: 'By: http://amicus.ba',
href: 'http://amicus.ba'
,
chart:
type: 'spline',
animation: Highcharts.svg, // Ne animiraj u starom IE
marginRight: 1,
events:
load: function ()
// Postaviti update grafikona svake sekunde
var series = this.series[0];
setInterval(function ()
var x = jfDatumi, // Trenutno vrijeme
//var x = new Date(), // current time
//x=jfDatumi,
//var x = (new Date()).getTime(),
y = jfTempOuts;
series.addPoint([x, y], true, true);
, 1500);
,
title:
text: 'Test Vanjska temperatura [°C]'
,
xAxis:
type: 'datetime',
categories: jfDatumi,
minRange: 1,
title:
text: 'Vrijeme'
,
tickPixelInterval: 1,
,
yAxis:
minRange: 0,
title:
text: '[°C]'
,
plotLines: [
value: 0,
width: 2,
color: '#808080'
]
,
tooltip:
formatter: function ()
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.y, 2) + ' [°C]';
,
legend:
enabled: false
,
exporting:
enabled: false
,
series: [
name: 'Vanjska temperatura',
//data: (jfTempOuts)
data: (function ()
// generate an array of random data
var data = [],
time = jfDatumi,
i;
for (i = 0; i <= 20; i += 1)
data.push([
time,
jfTempOuts
]);
return data;
())
]
);
);
);
此时，我有来自 jfDatumi 的时间，但没有来自 jfTempOuts 的温度值。
【问题讨论】：
【参考方案1】：我自己找到了解决方案。 这是对我有用的代码：
// Animirani grafikon vanjske temperature
$(function ()
$(document).ready(function ()
Highcharts.setOptions(
global:
useUTC: false,
);
$('#vanjskaTemp').highcharts(
credits:
text: 'By: http://amicus.ba',
href: 'http://amicus.ba'
,
chart:
type: 'spline',
animation: Highcharts.svg, // Ne animiraj u starom IE
marginRight: 1,
events:
load: function ()
// Postaviti update grafikona po podešenom intervalu
var series = this.series[0];
var br=20; // Start brojača za indeksiranje niza temperatura (podešeno u: for (i = 0; i <= 20; i += 1))
setInterval(function ()
br=br+1; // Brojač za indeksiranje niza temperatura
// Zaustavljanje skrolovanja ako je dostignut kraj niza jfTempOuts
if (br<=jfTempOuts.length-1)
var x = jfSamoVrijeme; // Vrijeme za X osu (zaustavi se osa ako se ne očitava)
y = jfTempOuts[br]; // Vrijednosti za Y osu (Vanjske temperature)
series.addPoint([x, y], true, true);
else
//document.write("BR:<li>"+br+"</li>");
, 1500);
,
title:
text: 'Vanjska temperatura [°C]'
,
xAxis:
type: 'datetime',
categories: jfSamoVrijeme,
minRange: 1,
title:
text: 'Vrijeme'
,
tickPixelInterval: 1,
,
yAxis:
minRange: 0,
title:
text: 'Vanjska temperatura [°C]'
,
plotLines: [
value: 0,
width: 0.5,
color: '#808080'
]
,
tooltip:
formatter: function ()
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.y, 2) + ' [°C]';
,
legend:
enabled: false
,
exporting:
enabled: false
,
series: [
name: 'Vanjska temperatura',
data: (function ()
var data = [],
time = jfSamoVrijeme,
i;
for (i = 0; i <= 20; i += 1)
data.push([
time,
jfTempOuts
]);
return data;
())
]
);
);
);
// Kraj animiranog grafikona vanjske temperature
我现在唯一的问题是我不能显示前 20 个点，但不是那么重要。 我也会找到解决这个问题的方法。 My chart
【讨论】：
highcharts动态图
Highcharts动态图 每秒更新曲线图chart.eventschart.event属性中添加load方法（图表加载事件）。在1000毫秒内随机产生数据点并生成图表。chart:{events:{load:function(){//图表每秒更新一次varseries=this.series[0];setInterval(function(){varx=(newDate... 查看详情
Highcharts - 如何拥有动态高度的图表？
】Highcharts-如何拥有动态高度的图表？【英文标题】：Highcharts-howtohaveachartwithdynamicheight?【发布时间】：2012-02-0706:04:13【问题描述】：我想要一个随浏览器窗口调整大小的图表，但问题是高度固定为400像素。ThisJSFiddleexample也有同... 查看详情
如何在工具提示悬停在点 Highcharts 上动态更改图表标题 .. React JS
】如何在工具提示悬停在点Highcharts上动态更改图表标题..ReactJS【英文标题】：HowtochangethecharttitledynamicallyontooltiphoverinthepointsHighcharts..ReactJS【发布时间】：2021-09-2711:02:48【问题描述】：如何在Highcharts中悬停时动态更改图表标题JSf... 查看详情
如何在将图表导出到文件时禁用 HighCharts 重新渲染？
】如何在将图表导出到文件时禁用HighCharts重新渲染？【英文标题】：HowtodisableHighChartsre-renderingwhileexportingchartingintofile?【发布时间】：2015-09-0912:32:49【问题描述】：我在应用程序中显示highcharts-样条图。在加载页面时，它会像往... 查看详情
如何使用 jQuery UI 滑块动态更新 highcharts
】如何使用jQueryUI滑块动态更新highcharts【英文标题】：HowtodynamicallyupdatehighchartsusingjQueryUIsliders【发布时间】：2013-03-1211:44:47【问题描述】：我正在寻找一种基于jQueryUI滑块确定的值动态更新Highcharts的方法。我还不太熟悉AJAX或JSON... 查看详情
Highcharts：动态设置 y 轴最大值和最小值，而不是在创建时
】Highcharts：动态设置y轴最大值和最小值，而不是在创建时【英文标题】：Highcharts:SetyAxisMaxandMindynamically,andnotatcreation【发布时间】：2013-02-1712:15:33【问题描述】：小问题：有没有办法在创建图表后在Highcharts中设置min/max。我在图... 查看详情
使用新数据集更新 highcharts
】使用新数据集更新highcharts【英文标题】：Updatehighchartswithnewsetofdata【发布时间】：2020-09-2713:39:25【问题描述】：通过从下拉列表中多选添加新堆栈来更新堆积柱形图。我尝试做newHighcharts.chart(...)我没有得到新的筹码。当我重新... 查看详情
javascript使用highcharts的动态图表(代码片段)
图表插件highcharts的动态化赋值，实现图表数据的动态化设置显示(代码片段)
在很早之前就介绍过图表插件Highcharts的使用了，在2014年的随笔《基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts》，这里基本上都介绍的比较完整，基本的设置也没有太大的差异，本篇介绍的是基于Bootstrap开发... 查看详情
动态更新chartjs图表的值
...时间的间隔上更新值。我的问题是创建图表后，我不知道如何正确更新其值...我的代码：varctx=$("#myChart").get(0).getContext("2d");vardts= 查看详情
如何通过Websocket的数据动态更新Ngx图表的条形图
】如何通过Websocket的数据动态更新Ngx图表的条形图【英文标题】：HowtoupdateBarchartofNgx-chartsgraphdynamicallyinangularthroughtheWebsocket\'sdata【发布时间】：2019-07-0908:18:03【问题描述】：我正在创建基于角度的仪表板，仪表板包含NGX图表。... 查看详情
highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台，前台把这些值赋值给x轴与y轴。 柱状图的动态传值：//获取后台数据varx=[];//X轴vary=[];//Y轴 varxtext=[];//X轴TEXT varcolor=["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5ACD","#0000FF... 查看详情
Highcharts - redraw() 与新的 Highcharts.chart
】Highcharts-redraw()与新的Highcharts.chart【英文标题】：Highcharts-redraw()vs.newHighcharts.chart【发布时间】：2012-12-1512:27:44【问题描述】：我很难理解更新highcharts图表的正确方法。假设我已经渲染了一个图表，然后我想以某种方式更新它... 查看详情
Highcharts，动态设置图例高度
】Highcharts，动态设置图例高度【英文标题】：Highcharts,setlegendheightdynamically【发布时间】：2018-01-1601:30:21【问题描述】：我想动态设置图例的高度，所以当容器调整大小时，图例高度会自动调整。理想情况下，图例的高度应该是... 查看详情
highchart图表动态高度
...据其上的数量行（例如，水平条）自动动态更改（更新）highcharts图表的高度。一个元素（例如，水平条）的高度是恒定的（例如，20px）。自动设置X元素的图表高度（~20px*X）。【问题讨论】：请提供一个最小的可重现示例，您... 查看详情
无法更新 highcharts 的数据
】无法更新highcharts的数据【英文标题】：Notabletoupdatedataforhighcharts【发布时间】：2020-09-2622:27:42【问题描述】：我想在点击按钮时更新图表上的数据。我尝试过使用addSeries和redraw。两者都没有使用最新信息更新我的图表。这里出... 查看详情
如何从 Highcharts 中删除按钮
】如何从Highcharts中删除按钮【英文标题】：HowtoremovebuttonfromHighcharts【发布时间】：2012-03-2922:49:41【问题描述】：我正在使用Highcharts库创建图表，我想知道如何删除右上角的2个小按钮，哪个可以打印和下载图表，我想添加一个... 查看详情
在页面上将 Highcharts 画布渲染为 PNG
】在页面上将Highcharts画布渲染为PNG【英文标题】：RenderHighchartscanvasasaPNGonthepage【发布时间】：2012-02-1804:36:51【问题描述】：我正在使用HighCharts库来生成一些动态图表。但是，我想将HighCharts画布元素呈现为PNG图像，以便用户可... 查看详情