Javascript 按设置的间隔从现有数据表更新数据点

我想让HighChart通过向图表添加下一个数据点来更新系列，以便图表“播放”。 我有一个包含X和Y分量的数据系列。我想让图表随着本系列的下一点更新（比如说每秒钟更新一次）。 我正在使用DotNet.HighCharts API的VB.NET 4站点中使用此功能。我已经跟随了几个演示（比如一个），所有这些都使用了一些随机生成的值。如何让图表使用现有的一组点？下面是一个使用随机函数的JSFIDLE- 我只是不知道如何迭代传入的数据系列（如果是这样做的话），或者让DotNet.HighCharts为我迭代

用一些代码编辑：

    Dim stfipsList4 = (From r In dt4.AsEnumerable() Select r("areaname")).Distinct().ToList()
    Dim SeriesList4 As New List(Of Series)(stfipsList4.Count)
    Dim seriesItem4(stfipsList4.Count) As Series
    Dim xDate4 As DateTime
    Dim fakeDate4 As String
    Dim sX4 As Integer

    sX4 = 1
    For Each state In stfipsList4
        Dim data As New Dictionary(Of DateTime, Decimal)
        Dim stateVal As String = state.ToString
        Dim recCount As Integer = dt4.Rows.Count - 1
        Dim seriesPointCount As Integer = dt4.Compute("Count(population)", "areaname = '" + stateVal + "'")
        Dim chartData As Object(,) = New Object(seriesPointCount - 1, 1) {}
        Dim x As Integer = 0
        For i As Integer = 0 To recCount
            If dt4.Rows(i)("areaname").ToString = stateVal Then
                fakeDate4 = "1/1/" + dt4.Rows(i)("periodyear").ToString
                xDate3 = DateTime.Parse(fakeDate4)
                chartData.SetValue(xDate4.Date, x, 0)
                chartData.SetValue(dt4.Rows(i)("population"), x, 1)
                x += 1
            End If

        Next

        seriesItem4(sX4) = New Series With {
                    .Name = state.ToString, _
                    .Data = New Helpers.Data(chartData)
        }

        SeriesList4.Add(seriesItem3(sX4))

        sX4 = sX4 + 1
    Next


    Dim iterateData As String = JsonSerializer.Serialize(New Helpers.Data(New Object() {seriesItem3(1).Data}))

    Dim chart4 As Highcharts = New Highcharts("chart4").SetOptions(New Helpers.GlobalOptions() With { _
        .[Global] = New [Global]() With { _
                .UseUTC = False _
            } _
        }).InitChart(New Chart() With { _
         .DefaultSeriesType = ChartTypes.Spline, _
         .MarginRight = 10, _
         .Events = New ChartEvents() With { _
          .Load = "ChartEventsLoad" _
         } _
        }).SetTitle(New Title() With { _
         .Text = "Live data" _
        }).SetXAxis(New XAxis() With { _
         .Type = AxisTypes.Datetime, _
         .TickPixelInterval = 150 _
        }).SetSeries(New Series() With { _
             .Data = New Helpers.Data(New Object() {})
            }) _
    .AddJavascripVariable("counter", "0") _
    .AddJavascripVariable("stockData", iterateData) _
    .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _
                          " var series = this.series[0];" & vbCr & vbLf & _
                          " setInterval(function() {" & vbCr & vbLf & _
                          " var x = stockData[counter].key;" & vbCr & vbLf & _
                          " var y = stockData[counter].value;" & vbCr & vbLf & _
                          " series.addPoint([x, y], true, series.points.length > 10);" & vbCr & vbLf & _
                          " counter++;" & vbCr & vbLf & _
                          "}, 1000);")

这将传入我的数据系列（可以是1个或多个不同的单独系列）。我想做的是通过一次添加一个点来“播放”系列点（通过缩放x轴，但我不想删除任何点）。这个虚拟版本只是在给定时刻添加一个新的随机y值。我不知道如何迭代我现有的数据

这会将“stockData”javascript变量设置为我的数据集。我在FireBug中看到了这样的错误

stockData[计数器]未定义

var

计数器

在

$（文档）.ready（函数）

以及

stockdata

和

chart4

图表中定义。有关DotNet.Highcharts API的内容，请参见。 迭代的内嵌javascript如下所示：

        function ChartEventsLoad(){
        // set up the updating of the chart each second
 var series = this.series[0];
 setInterval(function() {
 var x = stockData[counter].key;
 var y = stockData[counter].value;
 series.addPoint([x, y], true, series.points.length > 10);
 counter++;
}, 1000);
    }
});

我真正不确定的部分是

stockData[计数器]

键/值。这在javascript中被称为什么？stockdata是一个数据列表，如下所示：

    var stockData = { data: [{ data: [[Date.parse('01/01/1900 00:00:00'), 530000],
    ....,
[Date.parse('01/01/2010 00:00:00'), 18801310]]
    }]
    };

编辑v4: 好了，现在我可以用一些讨厌的javascript解析出我的数据数组了

    Dim iterateData As String = JsonSerializer.Serialize(seriesItem3(1))

    Dim chart4 As Highcharts = New Highcharts("chart4").SetOptions(New Helpers.GlobalOptions() With { _
        .[Global] = New [Global]() With { _
                .UseUTC = False _
            } _
        }).InitChart(New Chart() With { _
         .DefaultSeriesType = ChartTypes.Spline, _
         .MarginRight = 10, _
         .Events = New ChartEvents() With { _
          .Load = "ChartEventsLoad" _
         } _
        }).SetTitle(New Title() With { _
         .Text = "Live data" _
        }).SetXAxis(New XAxis() With { _
         .Type = AxisTypes.Datetime, _
         .TickPixelInterval = 150 _
        }).SetSeries(New Series() With { _
             .Data = New Helpers.Data(New Object() {})
            }) _
    .AddJavascripVariable("counter", "0") _
    .AddJavascripVariable("stockData", iterateData.ToString) _
    .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _
                          " var result = stockData.data;" & vbCr & vbLf & _
                          " var series = this.series[0];" & vbCr & vbLf & _
                          " setInterval(function() {" & vbCr & vbLf & _
                          " var p = String(result[counter]);" & vbCr & vbLf & _
                          " var splitp = p.split("","");" & vbCr & vbLf & _
                          " var x = splitp[0];" & vbCr & vbLf & _
                          " var y = splitp[1];" & vbCr & vbLf & _
                          " series.addPoint([x, y], true, false, true);" & vbCr & vbLf & _
                          " counter++;" & vbCr & vbLf & _
                          "}, 1000);")

    ltrChart4.Text = chart4.ToHtmlString()

如果我查看firebug中的x和y值，我可以看到这些是预期值。但是，我的图表只是从1900小时开始在x轴上更新时间，并每秒添加一个点（根据javascript函数），但没有y值。此外，y轴似乎从-2.5开始-我使用的所有值都不小于1000，更不用说0了。我非常接近……

您可以在

无论如何，下面是一个示例代码，说明在迭代数据时如何在图表中每秒添加点：

Highcharts chart = new Highcharts("chart")
            .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } })
            .InitChart(new Chart
                       {
                           DefaultSeriesType = ChartTypes.Spline,
                           MarginRight = 10,
                           Events = new ChartEvents
                                    {
                                        Load = "ChartEventsLoad"
                                    }
                       })
            .SetTitle(new Title { Text = "Live data" })
            .SetXAxis(new XAxis
                      {
                          Type = AxisTypes.Datetime,
                          TickPixelInterval = 150
                      })
            .SetSeries(new Series
                       {
                           Name = "Live data",
                           Data = new Data(new[] { new Point { X = Tools.GetTotalMilliseconds(DateTime.Now), Y = 0 } })
                       })
            .AddJavascripVariable("counter", "0")
            .AddJavascripVariable("stockData", JsonSerializer.Serialize(ChartsData.StockData))
            .AddJavascripFunction("ChartEventsLoad",
                                  @"// set up the updating of the chart each second
                                   var series = this.series[0];
                                   setInterval(function() {
                                      var x = (new Date()).getTime(); // current time
                                      var y = stockData[counter];
                                      series.addPoint([x, y], true, series.points.length > 10);
                                      counter++;
                                   }, 1000);");

---

对不起，C#代码。我希望这对您有所帮助，您可以找到好的转换器。

终于可以使用了。这是我的解决方案-可能不是最漂亮的，但它是有效的。 重要的一点是传递

iterated

的

iterateData.ToString（）

。从这一点开始，您可以在该点上循环，然后在每个元素上拆分。我添加了一个检查，以确保在到达数据集中的最后一个点时，点的添加停止。要做的仍然是允许它处理多个系列并“播放”它们

    Dim stfipsList4 = (From r In dt4.AsEnumerable() Select r("areaname")).Distinct().ToList()
    Dim SeriesList4 As New List(Of Series)(stfipsList4.Count)
    Dim seriesItem4(stfipsList4.Count) As Series
    Dim xDate4 As DateTime
    Dim fakeDate4 As String
    Dim sX4 As Integer

    sX4 = 1
    For Each state In stfipsList4
        Dim data As New Dictionary(Of DateTime, Decimal)
        Dim stateVal As String = state.ToString
        Dim recCount As Integer = dt4.Rows.Count - 1
        Dim seriesPointCount As Integer = dt4.Compute("Count(population)", "areaname = '" + stateVal + "'")
        Dim chartData As Object(,) = New Object(seriesPointCount - 1, 1) {}
        Dim x As Integer = 0
        For i As Integer = 0 To recCount
            If dt4.Rows(i)("areaname").ToString = stateVal Then
                fakeDate4 = "1/1/" + dt4.Rows(i)("periodyear").ToString
                xDate3 = DateTime.Parse(fakeDate4)
                chartData.SetValue(xDate4.Date, x, 0)
                chartData.SetValue(dt4.Rows(i)("population"), x, 1)
                x += 1
            End If

        Next

        seriesItem4(sX4) = New Series With {
                    .Name = state.ToString, _
                    .Data = New Helpers.Data(chartData)
        }

        SeriesList4.Add(seriesItem3(sX4))

        sX4 = sX4 + 1
    Next

    Dim iterateData As String = JsonSerializer.Serialize(seriesItem3(1))

    Dim chart4 As Highcharts = New Highcharts("chart4").SetOptions(New Helpers.GlobalOptions() With { _
        .[Global] = New [Global]() With { _
                .UseUTC = False _
            } _
        }).InitChart(New Chart() With { _
         .DefaultSeriesType = ChartTypes.Column, _
         .MarginRight = 10, _
         .Events = New ChartEvents() With { _
          .Load = "ChartEventsLoad" _
         } _
        }).SetTitle(New Title() With { _
         .Text = "Live data" _
        }).SetXAxis(New XAxis() With { _
         .Type = AxisTypes.Datetime, _
         .TickPixelInterval = 150 _
        }).SetSeries(New Series() With { _
             .Data = New Helpers.Data(New Object() {}), _
             .Name = seriesItem3(1).Name
            }) _
    .AddJavascripVariable("iterated", iterateData.ToString) _
    .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _
                          " var result = iterated.data;" & vbCr & vbLf & _
                          " var counter = 0;" & vbCr & vbLf & _
                          " var series = this.series[0];" & vbCr & vbLf & _
                          " var loopseries = function() {" & vbCr & vbLf & _
                          " if (counter <= result.length) {" & vbCr & vbLf & _
                          " var p = String(result[counter]);" & vbCr & vbLf & _
                          " var splitp = p.split("","");" & vbCr & vbLf & _
                          " var x = Number(splitp[0]);" & vbCr & vbLf & _
                          " var y = Number(splitp[1]);" & vbCr & vbLf & _
                          " series.addPoint([x, y], true, series.points.length > 10, true);" & vbCr & vbLf & _
                          " counter++;" & vbCr & vbLf & _
                          " } else {" & vbCr & vbLf & _
                          " clearInterval(loopseries);" & vbCr & vbLf & _
                          " }};" & vbCr & vbLf & _
                          " setInterval(loopseries, 100);")

    ltrChart4.Text = chart4.ToHtmlString()

Dim stfipsList4=（从dt4.AsEnumerable（）中的r选择r（“区域名称”））.Distinct（）.ToList（）
Dim系列列表4作为新列表（系列）（stfipsList4.Count）
Dim系列项目4（stfipsList4.Count）作为系列
Dim xDate4作为日期时间
Dim fakeDate4作为字符串
作为整数的Dim sX4
sX4=1
对于stfipsList4中的每个状态
作为新字典的Dim数据（日期时间，十进制）
Dim stateVal As String=state.ToString
Dim recCount As Integer=dt4.Rows.Count-1
Dim seriesPointCount As Integer=dt4.Compute（“计数（总体）”，“区域名称=”+“状态值+”））
Dim chartData作为对象（，）=新对象（seriesPointCount-1，1）{
尺寸x为整数=0
对于i作为整数=0进行重新计数
如果dt4.Rows（i）（“areaname”）.ToString=stateVal，则
fakeDate4=“1/1/”+dt4.行（i）（“周期年”）。ToString
xDate3=DateTime.Parse（fakeDate4）
chartData.SetValue（xDate4.Date，x，0）
chartData.SetValue（dt4.行（i）（“总体”），x，1）
x+=1
如果结束
下一个
SerieItem4（sX4）=具有{
.Name=state.ToString_
.Data=新的助手.Data（图表数据）
}
SeriesList4.Add（seriesItem3（sX4））
sX4=sX4+1
下一个
Dim iterateData As String=JsonSerializer.Serialize（seriesItem3（1））
Dim chart4 As Highcharts=新的Highcharts（“chart4”）.SetOptions（带{_
[Global]=带有{_
.UseUTC=False_
} _
}).InitChart（带有{_
.DefaultSeriesType=ChartTypes.Column_
.MarginRight=10_
.Events=带有{_
.Load=“ChartEventsLoad”_
} _
}).SetTitle（带有{_
.Text=“实时数据”_
}).SetXAxis（带{_
.Type=AxisTypes.Datetime_
.TickPixelInterval=150_
}).SetSeries（带{_
.Data=新的Helpers.Data（新对象（）{}）_
.Name=系列项目3（1）.Name
}) _
.AddJavascripVariable（“迭代的”，iterateData.ToString）_
.AddJavascripFunction（“ChartEventsLoad”，“//设置每秒更新图表”&vbCr&vbLf&_
“var result=iterated.data；”&vbCr&vbLf&_
“var计数器=0；”&vbCr&vbLf&_
“var系列=此.series[0]；”&vbCr&vbLf&_
“var loopseries=function（）{”&vbCr&vbLf&_
“如果（计数器10，真）；”&vbCr&vbLf&_
“计数器++；”&vbCr&vbLf&_
}else{&vbCr&vbLf&_
“clearInterval（loopseries）；”&vbCr&vbLf&_
“}}；”&vbCr&vbLf&_
“设定间隔(