Javascript 分析Highcharts中多个类别的CSV
我调用web服务来获取如下数据:Javascript 分析Highcharts中多个类别的CSV,javascript,jquery,csv,highcharts,Javascript,Jquery,Csv,Highcharts,我调用web服务来获取如下数据: Timestamp,Speed1,Speed2 10/5/2015 12:00:00 AM,86,46.2 10/5/2015 1:00:00 AM,78,51 10/5/2015 2:00:00 AM,77,52 10/5/2015 3:00:00 AM,80,49 10/5/2015 4:00:00 AM,112,42 10/5/2015 5:00:00 AM,79,50 我想制作一个包含两个类别的折线图,每个“速度”对应一个类别,时间在x轴上,速度在y轴
Timestamp,Speed1,Speed2
10/5/2015 12:00:00 AM,86,46.2
10/5/2015 1:00:00 AM,78,51
10/5/2015 2:00:00 AM,77,52
10/5/2015 3:00:00 AM,80,49
10/5/2015 4:00:00 AM,112,42
10/5/2015 5:00:00 AM,79,50
我想制作一个包含两个类别的折线图,每个“速度”对应一个类别,时间在x轴上,速度在y轴上。我很难解析CSV来生成一个Highcharts系列。目前,我在执行此操作时可以看到一个类别:
$.get('GetSummaries.asmx/GetSummaryCsv', { }, function (csv) {
var speedSeries = [];
var lines = csv.trim().split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if ((lineNo !== 0) && (line != "")) {
var x = new Date(items[0]),
speed1 = parseInt(items[1]),
speed2 = parseInt(items[2]);
var year = x.getFullYear();
var month = x.getMonth();
var day = x.getDate();
var hour = x.getHours();
var min = x.getMinutes();
var thisDate = Date.UTC(year, month, day, hour, min);
speedSeries.push([thisDate, speed1, speed2]);
}
});
options.series.push({
data: speedSeries,
type: 'line',
color: 'DarkBlue'
});
var chart = new Highcharts.Chart(options);
});
如何创建数组以生成包含两条线的图表?每种速度类别对应一条线?您需要两个系列来完成此操作
var csv=“时间戳,速度1,速度2\n”+
“2015年5月10日上午12:00:00,86,46.2\n”+
“2015年5月10日上午1:00:00,78,51\n”+
“2015年5月10日上午2:00:00,77,52\n”+
“2015年5月10日上午3:00:00,80,49\n”+
“2015年5月10日上午4:00:00,112,42\n”+
“2015年5月10日上午5:00:00,79,50\n”;
var speedSeries=[],[];
var lines=csv.trim().split('\n');
$.each(行,函数)(行号,行){
var items=line.split(',');
如果((行号!==0)和&(行号!==“”){
var x=新日期(项目[0]),
speed1=parseInt(项目[1]),
speed2=parseInt(项目[2]);
var year=x.getFullYear();
var month=x.getMonth();
var day=x.getDate();
var hour=x.getHours();
var min=x.getMinutes();
var thisDate=Date.UTC(年、月、日、小时、分钟);
speedSeries[0]。推送([thisDate,speed1]);
speedSeries[1]。推送([thisDate,speed2]);
}
});
var options={series:[],chart:{renderTo:“chart”},xAxis:{type:'datetime'};
options.series.push({
数据:speedSeries[0],
键入:“行”,
颜色:“深蓝色”,
名称:“速度1”
});
options.series.push({
资料:speedSeries[1],,
键入:“行”,
颜色:“红色”,
名称:“速度2”
});
var图表=新的Highcharts.图表(选项)代码>
#图表{
宽度:500px;
高度:300px;
}