チャートが「再生」されるように、次のデータポイントをチャートに追加して、HighChart でシリーズを更新したいと考えています。X コンポーネントと Y コンポーネントの両方を含むデータ シリーズがあります。このシリーズの次のポイントでチャートを (たとえば毎秒) 更新したいと思います。DotNet.HighCharts API を使用して VB.NET 4 サイトでこれを使用しています。私はいくつかのデモ (これなど) をフォローしてきましたが、これらはすべてランダムに生成された値を使用しています。グラフで既存のポイント セットを使用するにはどうすればよいですか? ランダム関数を使用した jsFiddle を次に示します - http://jsfiddle.net/tQpNN/3/ 渡されたデータ シリーズを反復処理する方法 (それがその方法である場合) または 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 つまたは複数の異なる個別のシリーズである可能性があります)。私がやりたいことは、一度に1つのポイントを追加してシリーズポイントを「再生」させることです(x軸のスケーリングを使用しますが、ポイントを削除したくありません)。このダミー バージョンは、特定の瞬間に新しいランダムな y 値を追加するだけです。既存のデータを反復処理する方法がわかりません。
これにより、「stockData」javascript var がデータ セットに設定されます。FireBug に次のようなエラーが表示されます
stockData[カウンター] は定義されていません
varは、チャートと一緒にcounter定義されます。DotNet.Highcharts API が出力する内容については、http://jsfiddle.net/ZvYT6/ を参照してください。反復のインライン JavaScript は次のようになります。$(document).ready(function)stockdatachart4
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]]
}]
};
EDIT 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 の値を見ると、これらが期待値であることがわかります。ただし、私のグラフは x 軸の時間が ~1900 時間から更新され、(javascript 関数ごとに) 毎秒ポイントが追加されますが、y 値はありません。さらに、y 軸は -2.5 から始まるように見えます - 私が使用している値はどれも 0 どころか 1000 未満ではありません。私はとても近いです...