使用HighCharts和DotNet.HighCharts「玩」多

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查詢需要添加到圖表的數據。我使用對象[]的列表來創建單個點，然後我將該列表添加到系列列表中。我遍歷循環的次數達到了我需要的所有系列。然後爲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); 
}