2012-04-16 97 views
1

我希望HighChart通過向圖表添加下一個數據點來更新系列,以便圖表「播放」。 我有一個包含X和Y分量的數據系列。我希望圖表能夠在本系列中的下一個點更新(比如說每秒)。 我在一個使用DotNet.HighCharts API的VB.NET 4網站中使用它。我跟隨了幾個演示(如this之一),並且所有這些都使用了一些隨機生成的值。我怎樣才能讓圖表使用現有的一組點?這裏是一個使用隨機函數的jsFiddle - http://jsfiddle.net/tQpNN/3/ 我只是不知道如何遍歷傳入的數據序列(如果是這樣做的話)或使DotNet.HighCharts迭代我。從現有數據表更新數據點設置時間間隔

EDIT一些代碼:

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 var設置爲我的數據集。我看到的錯誤在Firebug指出

stockData [計]未定義

的VAR counter$(document).ready(function)stockdatachart4圖一起定義。有關DotNet.Highcharts API吐出的內容,請參閱http://jsfiddle.net/ZvYT6/。 的在線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[counter]鍵/值。這是什麼在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() 

如果我看的螢火x和y的值,我可以看到的是,這些都是預期值。但是,我的圖表只是在〜1900小時開始的x軸上更新時間,並且每秒都會增加一個點(每個javascript函數),但沒有y值。此外,y軸似乎在-2.5開始 - 我使用的任何值都不到1000,更不用說0.我很接近...

回答

2

終於得到了這個工作。這是我的解決方案 - 可能不是最漂亮的,但它的工作原理。 重要的是通過iteratediterateData.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() 
1

您可以看到「Spline Update Each Second 「在的DotNet.Highchart project

但無論如何,sample project,這裏是一個示例代碼,當你重複你的數據,你可以怎麼加點每一秒在圖表中:

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#代碼。我希望這是有幫助的,你可以找到好的轉換器。

+0

這是我試圖與實際工作的例子。我只是不知道如何迭代我傳遞的數據集。看到我上面的代碼編輯。 – wergeld 2012-04-17 16:23:00

+0

在這裏的示例代碼什麼是ChartsData.stockdata?如果我嘗試將其更改爲我已知的系列(seriesItem3(0).data),則會出現「未設置爲對象實例的對象引用」錯誤 - 可能不會指向正確的系列,但它沒有說明什麼部分出錯(它只是指向整個Dim chart4語句)。即使如此,我的系列中的下一個數據元素(x,y)旁邊的繪製點的設置也不完全清楚。我想我應該首先添加一個空系列,以便創建圖表,然後遍歷我的系列以添加它們的點。 – wergeld 2012-04-17 18:13:05

+0

好吧,看起來你的stockData對象實際上只是y值。而且它也是逗號分隔的,所以stockData [counter]起作用。如果你有一個[x,y]對,它不會。我已經嘗試過var result = $ .parseJSON(stockData.data),然後通過$ .each(result,function(k,v))遍歷它,並且由於結果爲NULL而失敗...因爲它不在預期的JSON 「key」的格式:「value」,「key」:「value」等等。如何讓parseJSON或函數循環來識別HighCharts [[key,value],[key,value]]格式? – wergeld 2012-04-18 13:12:56