从2个不同的csv文件中加载高分辨率数据 [英] load data in highcharts from 2 different csv files
问题描述
我试图找出是否可以使用2个源（一个用于类别，另一个用于实际数据绘制）。我经常发现自己需要针对不同的系列使用相同的类别;但由于它们不是全球性的，因此我无法在图表中编码。例如，图片显示了温度传感器数据：它使用摄氏温度，我的类别适合特定的用户情况;适用于我所有的温度传感器，但如果我需要使用来自压力传感器的数据，则需要更改测量单位和该类别中的其他参数。
缓解;我可以简单地编写函数，直接从服务器生成大量特定的csv文件;但是我认为我可以从服务器已经返回的文件中获取零散的文件。
但是我找不到一个关于如何将不同文件设置为类别和系列的源代码的示例。是否有可能或者是否应该制作大量广告特别单一的csv文件？
编辑
我使用的是在highcharts网站上加载csv文件的标准示例;它不在JSFiddle上，所以我可以将链接粘贴到该Web示例： http： //www.highcharts.com/studies/data-from-csv.htm
我所做的是复制$ .get函数，使用不同的文件名，但它不会工作;所以我试图改变数据名称，也没有工作：
$（document）.ready（function （）{
var options = {
图表：{
renderTo：'container'，
type：'column'
} ，
title：{
text：'Fruit Consumption'
}，
xAxis：{
categories：[]
}，
yAxis ：{
title：{
text：'单位'
}
}，
系列：[]
};
/ *
从CSV文件中加载数据，这是文件的内容：
苹果，梨，橘子，香蕉，Plu ms
John，8,4,6,5
Jane，3,4,2,3
Joe，86,76,79,77
Janet，3,16， 13,15
$ b $ /
$ .get（'data.csv'，函数（数据）{
//拆分行
var lines = data。分裂（ '\\\
'）;
$ .each（行，函数（lineNo，line）{
var items = line.split（'，'）;
//标题行包含类别$ b $如果（itemNo> 0）options.xAxis.categories.push（item）; $ b（lineNo == 0）{
$ .each（items，function（itemNo，item））{
if $ b $）
//其余的行包含名字在第一位置的数据
else {
var series = {
data：[]
};
$ .each（items，function（itemNo，item）{
if（itemNo == 0）{
series.name = item ;
} else {
series.data.push（parseFloat（项目））;
}
}）;
options.series.push（series）;
}
}）;
$ .get（'data2.csv'，function（data）{
//拆分行
var lines = data.split（'\\\
'）;
$ .each（行，函数（lineNo，line）{
var items = line.split（'，'）;
//标题行包含类别$ b $如果（itemNo> 0）options.xAxis.categories.push（item）; $ b（lineNo == 0）{
$ .each（items，function（itemNo，item））{
if $ b $）
//其余的行包含名字在第一位置的数据
else {
var series = {
data：[]
};
$ .each（items，function（itemNo，item）{
if（itemNo == 0）{
series.name = item;
} else {
series.data.push（parseFloat（item））;
}
}）;
options.series.push（series）;
}
}）;
var chart = new Highcharts.Chart（options）;
}）;
}）;
这里您可以找到如何将三个文件加载为系列： http://www.highcharts.com/stock/demo/compare p>
所以唯一的区别是您只使用一个系列，第二个文件将用于类别数据。
<在上面的解决方案中，添加了一些全局计数器，在收到所有文件后呈现图表。第二种解决方案是在第一个内部回调中调用第二个AJAX，片段：
$。getJSON（url1，function（data）{
$ .getJSON（url2，function（data2 ）{
//在这里创建图表
}）;
}）;
编辑：
如果您有两个CSV文件，这是你需要改变的：
$。get（url1，function（data1）{
$ .get（url2，function（data2）{
//解析data1
var parsedData1 = ...
//解析data2
var parsedData2 = ...
$（＃container）。highcharts（{
series：[{
data：parsedData1
}，{
data：parsedData2
} ]
}）;
}）;
}）;
I am trying to find out if I can get a graph using 2 sources (one for the categories, another for the actual data plotted.
I find myself often in need to use the same category for different series; but I can't code in the chart itself, since they are not global. As example picture a temperature sensor data: it uses Celsius and my category fits in a specific user case; which apply to all my temperature sensors but if I need to use data coming from a pressure sensor, then I need to change unit of measure and other parameters in the category.
To alleviate; I can simply write functions on the fly, that generate directly from the server, a ton of specific csv files; but I thought that I can just grab bits and pieces instead from the files that the server already returns.
But I can't find an example about how would you set different files as source for the category and the series. Is this possible or should I just make a ton of ad hoc single csv files?
EDIT I am using the standard example that is on the highcharts site, to load a csv file; it is not on JSFiddle so I can just paste the link to that web example: http://www.highcharts.com/studies/data-from-csv.htm
What I did was to duplicate the $.get function, using a different file name, but it won't work; so I tried to change also the data name, and that didn't work either:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
series: []
};
/*
Load the data from the CSV file. This is the contents of the file:
Apples,Pears,Oranges,Bananas,Plums
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
*/
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
$.get('data2.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
Here you can find example how to load three files as series: http://www.highcharts.com/stock/demo/compare
So the only difference would be that you are using just one series, and second file will be used for categories data.
In above solution added is some global counter, to render chart after all files are received.
Second solution will be to call second AJAX inside callback for a first one, snippet:
$.getJSON(url1, function(data) {
$.getJSON(url2, function(data2) {
// create chart here
});
});
Edit:
If you have two CSV files, this is what you need to change:
$.get(url1, function(data1) {
$.get(url2, function(data2) {
// parse data1
var parsedData1 = ...
// parse data2
var parsedData2 = ...
$("#container").highcharts({
series: [{
data: parsedData1
}, {
data: parsedData2
}]
});
});
});
这篇关于从2个不同的csv文件中加载高分辨率数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
