标签：
我是用mvc做的highcharts图表，其中遇到了一些问题，现在都解决了
这段代码是从后台Action里面返回的json字符串
#region 拼接字符串
StringBuilder humstr = new StringBuilder();
StringBuilder tempstr = new StringBuilder();
StringBuilder surfstr = new StringBuilder();
StringBuilder offsetstr = new StringBuilder();
for (int i = 0; i < list3.Count; i++)
{
humstr.Append(list3[i].Humidity);
humstr.Append(",");
tempstr.Append(list3[i].Temperature);
tempstr.Append(",");
surfstr.Append(list3[i].SurfaceTemperature);
surfstr.Append(",");
offsetstr.Append(list3[i].ShapeChangeState);
offsetstr.Append(",");
}
var TempData2 = humstr.ToString().TrimEnd(‘,‘);
var TempData3 = tempstr.ToString().TrimEnd(‘,‘);
var TempData4 = surfstr.ToString().TrimEnd(‘,‘);
var TempData5 = offsetstr.ToString().TrimEnd(‘,‘);
#endregion
return Json(new { data2 = TempData2, data3 = TempData3, data4 = TempData4, data5 =TempData5 }, JsonRequestBehavior.AllowGet);
下面是前台highcharts图表，其中在series里面data显示的数组这里卡了一两天，原来是Y轴不能识别数据类型，当转为float在存入在一个数组里面就能识别了
$(document).ready(function () {
$.ajax({
url: "@Url.Action("Xdata", "History")",
type: "post",
data: { rangeTimes: "", hiddenname: "" },
dataType: "text",
success: function (data) {
var ss = eval("(" + data + ")");
var array2 = ss.data2.split(‘,‘);
var array3 = ss.data3.split(‘,‘);
var array4 = ss.data4.split(‘,‘);
var array5 = ss.data5.split(‘,‘);
var humArray = [];
for (var i = 0; i < array2.length; i++) {
if (array2[i] == "null") {
humArray[i] = null;
} else {
humArray[i] = parseFloat(array2[i]);
}
}
var tempArray = [];
for (var i = 0; i < array3.length; i++) {
if (array3[i] == "null") {
tempArray[i] = null;
} else {
tempArray[i] = parseFloat(array3[i]);
}
}
var surfArray = [];
for (var i = 0; i < array4.length; i++) {
if (array4[i] == "null") {
surfArray[i] = null;
} else {
surfArray[i] = parseFloat(array4[i]);
}
}
var offsetArray = [];
for (var i = 0; i < array5.length; i++) {
if (array5[i] == "null") {
offsetArray[i] = null;
} else {
offsetArray[i] = parseFloat(array5[i]);
}
}
var rangeTimes = $("#rangeTimes").val();
//格式06/02/2015 - 06/03/2015
var strings = rangeTimes.trim(‘ ‘).split(‘-‘);
var now = strings[0];
var years = new Date().getFullYear(), months = new Date().getMonth(), days = new Date().getDate();
if (now != false) {
var timestrings = now.split(‘/‘);
years = timestrings[2];
months = timestrings[0] - 1;
days = timestrings[1];
}
//绘图
$(‘#container‘).highcharts({
chart: {
zoomType: ‘x‘,
spacingRight: 20
},
title: {
text: ‘电容监测系统图形化报表‘
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
type: ‘datetime‘,
title: {
text: null
}
},
yAxis: [
{// Primary yAxis
title: {
text: ‘‘
}
}, { // Secondary yAxis
title: {
text: ‘相角偏移量‘,
style: {
color: ‘#F7A35C‘
}
},
labels: {
format: ‘{value} °‘,
style: {
color: ‘#F7A35C‘
}
},
opposite: true
}
],
tooltip: {
shared: true
},
legend: {
//layout: ‘vertical‘,
align: ‘left‘,
x: 80,
verticalAlign: ‘top‘,
floating: true,
backgroundColor: ‘#FFFFFF‘
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get(‘rgba‘)]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
name: ‘相角偏移量‘,
type: ‘spline‘,
color: ‘#F7A35C‘,
yAxis: 1,
pointInterval: 3600 * 1000,
pointStart: Date.UTC(years, months, days),
data: offsetArray,
tooltip: {
valueSuffix: ‘ °‘
}
},
{
name: ‘湿度‘,
type: ‘spline‘,
color: ‘#4572A7‘,
pointInterval: 3600 * 1000,//24*3600*1000 one day 3600*1000 one hour
pointStart: Date.UTC(years, months, days),
data: humArray,
tooltip: {
valueSuffix: ‘ %‘
}
},
{
name: ‘表面温度‘,
type: ‘spline‘,
color: ‘#AA4643‘,
pointInterval: 3600 * 1000,
pointStart: Date.UTC(years, months, days),
data: tempArray,
tooltip: {
valueSuffix: ‘ ℃‘
}
},
{
name: ‘温度‘,
type: ‘spline‘,
color: ‘#89A54E‘,
pointInterval: 3600 * 1000,
pointStart: Date.UTC(years, months, days),
data: surfArray,
tooltip: {
valueSuffix: ‘ ℃‘
}
}]
});
}
});
});
标签：
原文地址：http://www.cnblogs.com/kyjblog/p/highcharts.html
