javascript - 使用 HighCharts 和 DotNet.HighCharts 到 "Play"多个系列

Question

我有一组使用 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()

这只是一个系列。我想传递一个列表(系列)。需要参与的事情:创建 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 需要一个字符串并且内联代码给我无效的对象引用。

Answer 1

我实际上使用 DotNet.Highcharts 创建了一个具有未定义数量的系列的图表。为此，我使用 linq 查询需要添加到图表中的数据。我使用 object[] 列表来创建各个点，然后获取该列表并将其添加到 Series 列表中。我根据需要遍历循环多次以获得所有系列。然后对于 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);
}