グラフを再生するためにチャートに次のデータポイントを追加してHighChartをシリーズに更新したいと考えています。 私はXとYの両方のコンポーネントを含むデータ系列を持っています。このシリーズの次のポイントで、チャートが更新されるようにしたいと思います。 私はこれをDotNet.HighCharts APIを使用してVB.NET 4サイトで使用しています。私はいくつかのデモ(例えばthisのようなもの)に従ってきました。これらはすべて無作為に生成された値を使っています。既存のポイントセットを使用するためにチャートを取得するにはどうすればよいですか?ここでは、ランダム関数を使用してjsFiddleです - http://jsfiddle.net/tQpNN/3/ 私はちょうど渡されたデータシリーズ(それがそれを行う方法です)を反復するか、DotNet.HighChartsが私のために反復する方法を知りません。いくつかのコードと既存のDataTableからのデータポイントの更新設定間隔
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又は複数の異なる個々のシリーズであってもよい)、データのマイ直列に通過します。私がしたいのは、一度に1つのポイントを追加することでシリーズポイントを「再生」することです(x軸の拡大縮小ではポイントは削除したくありません)。このダミーバージョンは、与えられた瞬間に新しいランダムy値を追加するだけです。私は既存のデータをどのように反復処理するのか分かりません。
これは、 "stockData" javascript varを自分のデータセットに設定します。私は
stockData [カウンター]はVAR
counter
がstockdata
とchart4
チャートとともに$(document).ready(function)
に定義されている
定義されていないことを示すFirebugの中のエラーを見ています。 DotNet.Highcharts APIが吐き出すものについては、http://jsfiddle.net/ZvYT6/を参照してください。 はのインラインの繰り返しのために、このようになりますジャバスクリプト:
は 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で何と呼ばれていますか?
var stockData = { data: [{ data: [[Date.parse('01/01/1900 00:00:00'), 530000],
....,
[Date.parse('01/01/2010 00:00:00'), 18801310]]
}]
};
EDIT v4の: わかりましたので、今、私はいくつかの厄介なJavaScriptを使用して、データの私の配列を解析することができる午前stockdataは次のようになり、データのリストです。
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未満ではありません。私はとても近いです...
これは私が実際に作業しようとしていた例です。私は、私が通過している私のデータセットをどのように反復するのか分かりません。上記の私のコード編集を参照してください。 – wergeld
ここのサンプルコードでは、ChartsData.stockdataは何ですか?これを私が持っている既知のシリーズ(seriesItem3(0).data)に変更しようとすると、「オブジェクト参照がオブジェクトのインスタンスに設定されていません」というエラーが表示されます - おそらく正しいシリーズを指していませんが、どの部分がエラーを出しているのですか(Dim Chart4ステートメント全体を指しているだけです)。それでも、シリーズの次のデータ要素(x、y)の次に描画する点を設定する方法は完全にはわかりません。私は最初に空のシリーズを追加して、チャートを作成してから自分のシリーズを反復してポイントを追加するべきだと思っています。 – wergeld
さて、実際にはstockDataオブジェクトはちょうどyの値のようです。また、株式データ[カウンタ]が機能するようにコンマで区切ってもかまいません。 [x、y]ペアがある場合、それはしません。私はvar result = $ .parseJSON(stockData.data)を試してみましたが、$ .each(result、function(k、v))を経由してループしていますが、結果はNULLなので...失敗します。 「key」の形式:「value」、「key」:「value」...など。HighCharts [[key、value]、[key、value]]を認識するためにparseJSONまたは関数をループする方法フォーマット? – wergeld