使用ASP.NET MVC3中的DotNet高图在样条图中添加多个系列

Question

我正在使用asp.net mvc3使用dotnet高图。在将多个系列添加到样条图表中，我面临问题。

此代码基本上每秒更新图表。

这项工作找到了一个数据系列。但是我需要添加多个数据系列。

请帮助我为此代码添加多个系列。

预先感谢

public ActionResult SplineUpdateEachSecond()
{
     List<object> points = new List<object>(20);
     DateTime now = DateTime.Now;
     Random rand = new Random();
     for (int i = -19; i <= 0; i++)
          points.Add(new { X = now.AddSeconds(i), Y = rand.NextDouble() });
     Highcharts chart = new Highcharts("chart")
            .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } })
            .InitChart(new Chart
                       {
                           DefaultSeriesType = ChartTypes.Spline,
                           MarginRight = 10,
                           Events = new ChartEvents
                                    {
                                        Load = "ChartEventsLoad"
                                    }
                       })
            .AddJavascripFunction("ChartEventsLoad",
                                  @"// set up the updating of the chart each second
                                   var series = this.series[0];
                                   setInterval(function() {
                                      var x = (new Date()).getTime(), // current time
                                         y = Math.random();
                                      series.addPoint([x, y], true, true);
                                   }, 1000);")
            .SetTitle(new Title { Text = "Live random data" })
            .SetXAxis(new XAxis
                      {
                          Type = AxisTypes.Datetime,
                          TickPixelInterval = 150
                      })
            .SetYAxis(new YAxis
                      {
                          Title = new YAxisTitle { Text = "Value" },
                          PlotLines = new[]
                                      {
                                          new YAxisPlotLines
                                          {
                                              Value = 0,
                                              Width = 1,
                                              Color = ColorTranslator.FromHtml("#808080")
                                          }
                                      }
                      })
            .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" })
            .AddJavascripFunction("TooltipFormatter",
                                  @"return '<b>'+ this.series.name +'</b><br/>'+
                                   Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
                                   Highcharts.numberFormat(this.y, 2);")
            .SetLegend(new Legend { Enabled = false })
            .SetExporting(new Exporting { Enabled = false })
            .SetSeries(new Series
                       {
                           Name = "Random data",
                           Data = new Data(points.ToArray())
                       });
        return View(chart);
}

Answer 1

这里有示例。

假设，有一个类似于下面的返回系列的类：

public class ChartsData
{
     //public static Series Hestavollane
     //public static Series Voll 
}

第一个系列：

public static Series Hestavollane = new Series
                                    {
                                        Name = "Hestavollane",
                                        Data = new Data(new object[]
                                                       {
                                                            4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
                                                            7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
                                                            8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
                                                            7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
                                                            3.0, 3.0
                                                       })
                                    };

第二系列：

public static Series Voll = new Series
                            {
                                Name = "Voll",
                                Data = new Data(new object[]
                                                {
                                                    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
                                                    0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
                                                    0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
                                                    3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4
                                                })
                            };

应用于图表

.SetSeries(new[] { ChartsData.Hestavollane, ChartsData.Voll })