玩转Highcharts图表库系列（一） 显示多条曲线

Highcharts是一款纯javascript编写的图表库，能够很简单便捷地在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，功能强大、简单易用，并且开源免费。笔者曾经在多个能耗管理系统中使用到了它，为了满足各种图表显示要求，也算是历经磨难。

有关于基础的使用方法和完整的API请查看Highcharts中文网，本系列着重讲解用到过的一些略微复杂的场景。开场先上简单的，第一篇将讲显示多条曲线。

呈现的效果如下：





先上JS代码

<script type="text/javascript">
function chartsCommon(renderTo, chartType) {
return {
chart: {
zoomType: 'x',
resetZoomButton: {
theme: {
fill: 'white',
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#000',
style: {
color: 'white'
}
}
}
}
},
renderTo: renderTo,
plotBackgroundColor: null,
plotBorderWidth: null,
height: 382,
plotShadow: false,
type: chartType == false ? 'spline' : chartType
},
title: {
text: '',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [],
tickLength: 0, //主刻度的长度
tickWidth: 0, // 主刻度的宽度
startOnTick:true,
labels: {
step: 1, //步长，可以跳格
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{ // Primary yAxis
title: {
text: 'kWh'
},
labels: {
format: '{value} kWh'
}//,
//min: 0 // 如果y不可能出现负数，则以0为最小值
}, { // Secondary yAixs
title: {
text: '°C'
},
labels: {
format: '{value} °C'
},
opposite: true // Y轴分立两侧
}],
plotOptions: {
//曲线图
spline: {
marker: {
radius: 3,
//fillColor: '#FFFFFF',
//lineColor: '#666666',
lineWidth: 1.5,
symbol: 'circle'
}
//enableMouseTracking: false
}
},
tooltip: {
crosshairs: true,
shared: true
},
legend: {
borderWidth: 0
},
exporting: {
enabled: false
},
series: []
};
}

zoomType: ‘x’ 表示支持x轴放大缩小

resetZoomButton 表示显示恢复原图的按钮

设置2根Y轴，并分立左右就是如下代码：

yAxis: [{ // Primary yAxis
title: {
text: 'kWh'
},
labels: {
format: '{value} kWh'
}//,
//min: 0 // 如果y不可能出现负数，则以0为最小值
}, { // Secondary yAixs
title: {
text: '°C'
},
labels: {
format: '{value} °C'
},
opposite: true // Y轴分立两侧
}]

后台当然就要获取到两条曲线的数据

Highcharts highcharts = new Highcharts();
XAxis XAxis = new XAxis() { };
List<Series> listSeries = new List<Series>();
List<string> Categories = new List<string>();
List<object> values = new List<object>();
List<object> ValuesTemp = new List<object>(); // 温度
List<DbParam> HashKey = new List<DbParam>();
List<DbParam> HashKeyTemp = new List<DbParam>(); // 温度

// 能耗数据
string sSQL = @"exec getConsumptionChartData beginTime, endTime, type, back";
DbParam[] parms = new DbParam[] {
new DbParam("beginTime",time),
new DbParam("endTime",timeEnd),
new DbParam("type",timeType) ,
new DbParam("back",backid)
};
DataTable ds = DB.ExecuteDataTable(sSQL, parms);

CategoriesValueSet(ref HashKey, 0, time, timeEnd, timeTypeID, hourFrom, hourEnd);
if (ds != null && ds.Rows.Count > 0)
{
object value;
for (int i = 0; i < ds.Rows.Count; i++)
{
value = string.Empty;
// 能耗值
if (!Convert.IsDBNull(ds.Rows[i]["ep"]))
value = Convert.ToDecimal(ds.Rows[i]["ep"]).ToString("f2");
CategoriesValueSetSingleData(ref HashKey, value, ds.Rows[i]["gettime"].ToStr(), timeTypeID);
}
}
foreach (var item in HashKey)
{
Categories.Add(item.Name);
values.Add(item.Value);
}
listSeries.Add(new Series()
{
Name = "能耗",
Data = new HighchartsModel.Helpers.Data(values.ToArray())
});

// 温度数据
int outdoorSensorID = 2063;
sSQL = @"exec getTemperatureChartData beginTime, endTime, type, back";
parms = new DbParam[] {
new DbParam("beginTime",time),
new DbParam("endTime",timeEnd),
new DbParam("type",timeType) ,
new DbParam("back",outdoorSensorID)
};
ds = DB.ExecuteDataTable(sSQL, parms);
CategoriesValueSet(ref HashKeyTemp, 0, time, timeEnd, timeTypeID, hourFrom, hourEnd);
if (ds != null && ds.Rows.Count > 0)
{
object value;
for (int i = 0; i < ds.Rows.Count; i++)
{
value = string.Empty;
if (!Convert.IsDBNull(ds.Rows[i]["temp"]))
value = Convert.ToDecimal(ds.Rows[i]["temp"]).ToString("f1");
CategoriesValueSetSingleData(ref HashKeyTemp, value, ds.Rows[i]["gettime"].ToStr(), timeTypeID);
}
}
foreach (var item in HashKeyTemp)
{
Categories.Add(item.Name);
ValuesTemp.Add(item.Value);
}
listSeries.Add(new Series()
{
Name = "温度",
YAxis = 1,
Data = new HighchartsModel.Helpers.Data(ValuesTemp.ToArray())
});

XAxis.Categories = Categories.ToArray();
highcharts.SetXAxis(XAxis);
highcharts.SetSeries(listSeries.ToArray());
string highchartsJson = highcharts.GetOptionsJSON();
return @"{ ""Highcharts"":" + highchartsJson + "}";

持续更新中。。。

玩转Highcharts图表库系列（一） 显示多条曲线

玩转Highcharts图表库系列（二） 沿X轴设置不同的背景色分辨带

玩转Highcharts图表库系列（三） 给曲线加上点击事件

玩转Highcharts图表库系列（四） 散点图和曲线图的混合显示