Javascript 使用HighCharts和DotNet.HighCharts来；“玩”；多系列
我有一套使用VB.NET和DotNet.HighCharts创建的系列：Javascript 使用HighCharts和DotNet.HighCharts来；“玩”；多系列,javascript,highcharts,Javascript,Highcharts,我有一套使用VB.NET和DotNet.HighCharts创建的系列： Dim SeriesList4As New List(Of Series)(stfipsList4.Count) 我希望发生的事情与之类似，只是我希望能够通过多个系列，而不必事先知道我有多少 创建上述示例的VB代码如下： Dim stfipsList4 = (From r In dt4.AsEnumerable() Select r("areaname")).Distinct().ToList()
Dim SeriesList4As New List(Of Series)(stfipsList4.Count)
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()
Dim stfipsList4=（从dt4.AsEnumerable（）中的r选择r（“区域名称”））.Distinct（）.ToList（）
Dim系列列表4作为新列表（系列）（stfipsList4.Count）
Dim系列项目4（stfipsList4.Count）作为系列
Dim xDate4作为日期时间
Dim fakeDate4作为字符串
作为整数的Dim sX4
sX4=1
对于stfipsList4中的每个状态
作为新字典的Dim数据（日期时间，十进制）
Dim stateVal As String=state.ToString
Dim recCount As Integer=dt4.Rows.Count-1
Dim seriesPointCount As Integer=dt4.Compute（“计数（总体）”，“区域名称=”+“状态值+”））
Dim chartData作为对象（，）=新对象（seriesPointCount-1，1）{
尺寸x为整数=0
对于i作为整数=0进行重新计数
如果dt4.Rows（i）（“areaname”）.ToString=stateVal，则
fakeDate4=“1/1/”+dt4.行（i）（“周期年”）。ToString
xDate4=DateTime.Parse（fakeDate4）
chartData.SetValue（xDate4.Date，x，0）
chartData.SetValue（dt4.行（i）（“总体”），x，1）
x+=1
如果结束
下一个
SerieItem4（sX4）=具有{
.Name=state.ToString_
.Data=新的助手.Data（图表数据）
}
SeriesList4.Add（seriesItem4（sX4））
sX4=sX4+1
下一个
Dim iterateData As String=JsonSerializer.Serialize（seriesItem4（1））
Dim chart4 As Highcharts=新的Highcharts（“chart4”）.SetOptions（带{_
[Global]=带有{_
.UseUTC=False_
} _
}).InitChart（带有{_
.DefaultSeriesType=ChartTypes.Column_
.MarginRight=10_
.Events=带有{_
.Load=“ChartEventsLoad”_
} _
}).SetTitle（带有{_
.Text=“人口”_
}).SetTooltip（带有{_
.Formatter=“function（）{return'+this.series.name+'
'+Highcharts.dateFormat（'%Y'，this.x）+'：'+Highcharts.numberFormat（this.Y，0'，'）；}”_
}).SetXAxis（带{_
.Type=AxisTypes.Datetime_
.TickPixelInterval=150_
}).SetYAxis（带{_
.Min=0_
.Title=带有{_
.Text=“人口”_
.Align=轴标题对齐。高_
} _
}).SetSeries（带{_
.Data=新的Helpers.Data（新对象（）{}）_
}) _
.SetOptions（带有{_
.Colors=调色板颜色_
}) _
.AddJavascripVariable（“迭代的”，iterateData.ToString）_
.AddJavascripFunction（“ChartEventsLoad”，“//设置每秒更新图表”&vbCr&vbLf&_
“var result=iterated.data；”&vbCr&vbLf&_
“var计数器=0；”&vbCr&vbLf&_
“var系列=此.series[0]；”&vbCr&vbLf&_
“var loopseries=function（）{”&vbCr&vbLf&_
“如果（计数器10，真）；”&vbCr&vbLf&_
“计数器++；”&vbCr&vbLf&_
}else{&vbCr&vbLf&_
“clearInterval（loopseries）；”&vbCr&vbLf&_
“}}；”&vbCr&vbLf&_
“设置间隔（loopseries，300）；”）
ltrChart4.Text=chart4.ToHtmlString（）
.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);")
.AddJavascripVariable（“迭代”，iterateData.ToString）_
.AddJavascripFunction（“ChartEventsLoad”，“//设置每秒更新图表”&vbCr&vbLf&_
“var result=iterated.data；”&vbCr&vbLf&_
“var计数器=0；”&vbCr&vbLf&_
“var系列=此.series[0]；”&vbCr&vbLf&_
“var loopseries=function（）{”&vbCr&vbLf&_
“如果（计数器10，真）；”&vbCr&vbLf&_
“计数器++；”&vbCr&vbLf&_
}else{&vbCr&vbLf&_
“clearInterval（loopseries）；”&vbCr&vbLf&_
“}}；”&vbCr&vbLf&_
“设置间隔（loopseries，300）；”）
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);
}