使用 HighCharts 和 DotNet.HighCharts 来“玩”多个系列

我有一组使用 VB.NET 和 DotNet.HighCharts 创建的系列：

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

我想要发生的是类似的事情http://jsfiddle.net/8M2fF/ 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 需要一个字符串，并且内联代码给了我无效的对象引用。

我实际上使用 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);
}