我希望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)
與stockdata
和chart4
圖一起定義。有關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.我很接近...
這是我試圖與實際工作的例子。我只是不知道如何迭代我傳遞的數據集。看到我上面的代碼編輯。 – wergeld 2012-04-17 16:23:00
在這裏的示例代碼什麼是ChartsData.stockdata?如果我嘗試將其更改爲我已知的系列(seriesItem3(0).data),則會出現「未設置爲對象實例的對象引用」錯誤 - 可能不會指向正確的系列,但它沒有說明什麼部分出錯(它只是指向整個Dim chart4語句)。即使如此,我的系列中的下一個數據元素(x,y)旁邊的繪製點的設置也不完全清楚。我想我應該首先添加一個空系列,以便創建圖表,然後遍歷我的系列以添加它們的點。 – wergeld 2012-04-17 18:13:05
好吧,看起來你的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