Sử dụng HighCharts và DotNet.HighCharts để "Play" Nhiều Dòng

Question

tôi có một tập của loạt bài mà tôi đã tạo ra sử dụng VB.NET và DotNet.HighCharts:

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

Những gì tôi muốn có xảy ra là một cái gì đó tương tự đến http://jsfiddle.net/8M2fF/ ngoại trừ tôi muốn có thể vượt qua nhiều chuỗi mà không biết trước bao nhiêu tôi có.

Mã VB đã tạo ra ví dụ rằng ở trên là thế này:

 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() 

Đây là chỉ dành riêng cho một loạt duy nhất. Tôi muốn vượt qua trong một Danh sách (Of Series). Những điều mà cần phải tham gia: Tạo số n của loạt điểm thêm cho mỗi loạt Naming mỗi loạt

tôi có thể xử lý những mặt hàng đó chỉ được đi qua trong loạt bậc thầy "danh sách" mà tôi không thể đạt được.

EDIT: Dường như có sự nhầm lẫn về những gì tôi đang yêu cầu. Tôi có thể chuyển số N tới HighCharts thông qua API DotNet.HighCharts. Những gì tôi hiện không thể làm là vượt qua cùng một loạt các loạt chức năng javascript để lặp qua và "chơi" loạt. Vui lòng xem:

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

The .AddJavaScriptVariable mong đợi một chuỗi và trong dòng mã cho tôi tham chiếu đối tượng không hợp lệ.

Answer 1

Tôi thực sự sử dụng DotNet.Highcharts để tạo biểu đồ có số chuỗi không xác định. Để làm điều này, tôi truy vấn dữ liệu tôi cần thêm vào biểu đồ bằng linq. Tôi sử dụng một danh sách các đối tượng [] để tạo ra các điểm riêng lẻ sau đó tôi lấy danh sách đó và thêm nó vào danh sách Series. Tôi lặp qua vòng lặp nhiều lần như tôi cần để có được tất cả các Series. Sau đó, cho SetSeries tôi chỉ định những gì đã được chứa trong danh sách Series. Mã được viết bằng C# nhưng tôi chắc chắn bạn có thể thay đổi nó thành VB.NET. Đây là toàn bộ ActionResult tôi sử dụng để tạo biểu đồ:

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); 
}