5

VB.NET と DotNet.HighCharts を使用して作成した一連のシリーズがあります。

Dim SeriesList4As New List(Of Series)(stfipsList4.Count)

私が実現したいのはhttp://jsfiddle.net/8M2fF/に似たものですが、持っている数を事前に知らなくても複数のシリーズを渡すことができるようにしたいという点が異なります。

上記の例を作成した VB コードは次のとおりです。

        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
                    xDate4 = 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(seriesItem4(sX4))

            sX4 = sX4 + 1
        Next

        Dim iterateData As String = JsonSerializer.Serialize(seriesItem4(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 = "Population" _
                }).SetTooltip(New Tooltip() With { _
                    .Formatter = "function() { return '<b>' + this.series.name + '<br/>' + Highcharts.dateFormat('%Y', this.x) +'</b>: '+ Highcharts.numberFormat(this.y, 0, ','); }" _
                }).SetXAxis(New XAxis() With { _
                 .Type = AxisTypes.Datetime, _
                 .TickPixelInterval = 150 _
                }).SetYAxis(New YAxis() With { _
                       .Min = 0, _
                       .Title = New YAxisTitle() With { _
                        .Text = "Population", _
                        .Align = AxisTitleAligns.High _
                        } _
                }).SetSeries(New Series() With { _
                     .Data = New Helpers.Data(New Object() {}) _
                }) _
                .SetOptions(New Helpers.GlobalOptions() With { _
                .Colors = palette_colors _
                }) _
                .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, 300);")

        ltrChart4.Text = chart4.ToHtmlString()

これは単一のシリーズのみです。List(Of Series) を渡したいと思います。関与する必要があること: n 個のシリーズを作成する 各シリーズにポイントを追加する 各シリーズに名前を付ける

達成できないマスターシリーズの「リスト」を渡すだけのアイテムを処理できます。

編集：私が求めていることに混乱があるようです。DotNet.HighCharts API を介して N 個のシリーズを HighCharts に渡すことができます。私が現在できないことは、このシリーズの同じセットをjavascript関数に渡して、シリーズをループして「再生」することです。参照してください：

            .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, 300);")

.AddJavaScriptVariable は文字列を想定しており、コードをインライン化すると無効なオブジェクト参照が得られます。

4

1 に答える 1

5

私は実際にDotNet.Highchartsを使用して、シリーズの数が定義されていないグラフを作成しています。これを行うには、linqを使用してグラフに追加する必要のあるデータをクエリします。object []のリストを使用して個々のポイントを作成し、そのリストを取得してシリーズのリストに追加します。すべてのシリーズを取得するために必要な回数だけループを繰り返します。次に、SetSeriesに、シリーズリストに含まれているものを割り当てます。コードはC＃で記述されていますが、VB.NETに変更できると確信しています。グラフの作成に使用するActionResult全体を次に示します。

public ActionResult CombinerBarToday(DateTime? utcStartingDate = null,
                                     DateTime? utcEndingDate = null)
{
    //GET THE GENERATED POWER READINGS FOR THE SPECIFIED DATETIME
    var firstQ = from s in db.PowerCombinerHistorys
                 join u in db.PowerCombiners on s.combiner_id equals u.id
                 where s.recordTime >= utcStartingDate
                 where s.recordTime <= utcEndingDate
                 select new
                 {
                     CombinerID = u.name,
                     Current = s.current,
                     RecordTime = s.recordTime,
                     Voltage = s.voltage,
                     Watts = (s.current * s.voltage)
                 };

    //GET A LIST OF THE COMBINERS CONTAINED IN THE QUERY
    var secondQ = (from s in firstQ
                   select new
                   {
                        Combiner = s.CombinerID
                   }).Distinct();

    /* THIS LIST OF SERIES WILL BE USED TO DYNAMICALLY ADD AS MANY SERIES 
     * TO THE HIGHCHARTS AS NEEDED WITHOUT HAVING TO CREATE EACH SERIES INDIVIUALY */
    List<Series> allSeries = new List<Series>();

    TimeZoneInfo easternZone = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");

    //LOOP THROUGH EACH COMBINER AND CREATE SERIES
    foreach (var distinctCombiner in secondQ)
    {
        var combinerDetail = from s in db2.PowerCombinerHistorys
                 join u in db2.PowerCombiners on s.combiner_id equals u.id
                 where u.name == distinctCombiner.Combiner
                 where s.recordTime >= utcStartingDate
                 where s.recordTime <= utcEndingDate
                 select new
                 {
                     CombinerID = u.name,
                     Current = s.current,
                     RecordTime = s.recordTime,
                     Voltage = s.voltage,
                     Watts = (s.current * s.voltage) / 1000d
                 };


        var results = new List<object[]>();

        foreach (var detailCombiner in combinerDetail)
        {
            results.Add(new object[] { 
                            TimeZoneInfo.ConvertTimeFromUtc(detailCombiner.RecordTime, easternZone), 
                            detailCombiner.Watts });
        }

        allSeries.Add(new Series
        {
            Name = distinctCombiner.Combiner,
            //Data = new Data(myData)
            Data = new Data(results.ToArray())

        });
    }

    Highcharts chart = new Highcharts("chart")
    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Spline, ZoomType = ZoomTypes.X})
    .SetTitle(new Title { Text = "Combiner History" })
    .SetSubtitle(new Subtitle { Text = "Click and drag in the plot area to zoom in" })
    .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } })
    .SetPlotOptions(new PlotOptions
    {
        Spline = new PlotOptionsSpline
        {
            LineWidth = 2,
            States = new PlotOptionsSplineStates { Hover = new PlotOptionsSplineStatesHover { LineWidth = 3 } },
            Marker = new PlotOptionsSplineMarker
            {
                Enabled = false,
                States = new PlotOptionsSplineMarkerStates
                {
                    Hover = new PlotOptionsSplineMarkerStatesHover
                    {
                        Enabled = true,
                        Radius = 5,
                        LineWidth = 1
                    }
                }
            }
        }
    })
    .SetXAxis(new XAxis
    {
        Type = AxisTypes.Datetime,
        Labels = new XAxisLabels
        {
            Rotation = -45,
            Align = HorizontalAligns.Right,
            Style = "font: 'normal 10px Verdana, sans-serif'"
        },
        Title = new XAxisTitle { Text = "Time(Hour)" },
    })
    .SetYAxis(new YAxis
    {
        Title = new YAxisTitle { Text = "Kilowatt" }
    })

    .SetSeries(allSeries.Select(s => new Series {Name = s.Name, Data = s.Data }).ToArray());

    return PartialView(chart);
}
于 2012-04-21T20:27:41.957 に答える