Конвертировать CSV в определенный формат, используя JavaScript?
Я работаю над этим примером:
<!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/anychart-ui.min.css" />
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
// create data set on our data
var dataSet = anychart.data.set(getData());
// map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_1 = dataSet.mapAs({
x: [0],
value: [1]
});
// map data for the second series, take x from the zero column and value from the second column of data set
var seriesData_2 = dataSet.mapAs({
x: [0],
value: [2]
});
// map data for the third series, take x from the zero column and value from the third column of data set
var seriesData_3 = dataSet.mapAs({
x: [0],
value: [3]
});
// create line chart
chart = anychart.line();
// turn on chart animation
chart.animation(true);
// set chart padding
chart.padding([10, 20, 5, 20]);
// turn on the crosshair
chart.crosshair()
.enabled(true)
.yLabel(false)
.yStroke(null);
// set tooltip mode to point
chart.tooltip().positionMode('point');
// set chart title text settings
chart.title('Trend of Sales of the Most Popular Products of ACME Corp.');
chart.title().padding([0, 0, 5, 0]);
// set yAxis title
chart.yAxis().title('Number of Bottles Sold (thousands)');
chart.xAxis().labels().padding([5]);
// create first series with mapped data
var series_1 = chart.line(seriesData_1);
series_1.name('Brandy');
series_1.hoverMarkers()
.enabled(true)
.type('circle')
.size(4);
series_1.tooltip()
.position('right')
.anchor('left')
.offsetX(5)
.offsetY(5);
// create second series with mapped data
var series_2 = chart.line(seriesData_2);
series_2.name('Whiskey');
series_2.hoverMarkers()
.enabled(true)
.type('circle')
.size(4);
series_2.tooltip()
.position('right')
.anchor('left')
.offsetX(5)
.offsetY(5);
// create third series with mapped data
var series_3 = chart.line(seriesData_3);
series_3.name('Tequila');
series_3.hoverMarkers()
.enabled(true)
.type('circle')
.size(4);
series_3.tooltip()
.position('right')
.anchor('left')
.offsetX(5)
.offsetY(5);
// turn the legend on
chart.legend()
.enabled(true)
.fontSize(13)
.padding([0, 0, 10, 0]);
// set container id for the chart and set up paddings
chart.container('container');
// initiate chart drawing
chart.draw();
});
function getData() {
return [
['1986', 3.6, 2.3, 2.8, 11.5],
['1987', 7.1, 4.0, 4.1, 14.1],
['1988', 8.5, 6.2, 5.1, 17.5],
['1989', 9.2, 11.8, 6.5, 18.9],
['1990', 10.1, 13.0, 12.5, 20.8],
['1991', 11.6, 13.9, 18.0, 22.9],
['1992', 16.4, 18.0, 21.0, 25.2],
['1993', 18.0, 23.3, 20.3, 27.0],
['1994', 13.2, 24.7, 19.2, 26.5],
['1995', 12.0, 18.0, 14.4, 25.3],
['1996', 3.2, 15.1, 9.2, 23.4],
['1997', 4.1, 11.3, 5.9, 19.5],
['1998', 6.3, 14.2, 5.2, 17.8],
['1999', 9.4, 13.7, 4.7, 16.2],
['2000', 11.5, 9.9, 4.2, 15.4],
['2001', 13.5, 12.1, 1.2, 14.0],
['2002', 14.8, 13.5, 5.4, 12.5],
['2003', 16.6, 15.1, 6.3, 10.8],
['2004', 18.1, 17.9, 8.9, 8.9],
['2005', 17.0, 18.9, 10.1, 8.0],
['2006', 16.6, 20.3, 11.5, 6.2],
['2007', 14.1, 20.7, 12.2, 5.1],
['2008', 15.7, 21.6, 10, 3.7],
['2009', 12.0, 22.5, 8.9, 1.5]
]
}
</script>
</body>
</html>
Представьте, что я хотел использовать другие данные, и они не в том же формате, что и getData(), а в форме CSV. Есть ли в Anychart функциональность, позволяющая мне импортировать данные в формате CSV или в формате JSON, используя именно этот стиль?
Если нет, то как мне написать скрипт, который автоматически конвертирует мой CSV в этот читаемый формат?
Мой CSV выглядит примерно так:
Date,Open,High,Low,Close,Volume
2004-08-19,49.96,51.98,47.93,50.12,
2004-08-20,50.69,54.49,50.2,54.1,
2004-08-23,55.32,56.68,54.47,54.65,
2004-08-24,55.56,55.74,51.73,52.38,
2004-08-25,52.43,53.95,51.89,52.95,
2004-08-26,52.42,53.92,52.28,53.9,
2004-08-27,54.0,54.26,52.79,53.02,
2 ответа
Решение
Вы можете использовать данные CSV с AnyChart без форматирования, об этом есть статья в документации: https://docs.anychart.com/7.14.0/Working_with_Data/Data_From_CSV
Вот пример с данными в вашем формате CSV:
anychart.onDocumentReady(function() {
// create data set on our data
var dataSet = anychart.data.set(getData(),{ignoreFirstRow: true});
// map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_1 = dataSet.mapAs({
x: [0],
open: [1],
high: [2],
low: [3],
close: [4],
});
// map data for the second series, take x from the zero column and value from the second column of data set
var seriesData_2 = dataSet.mapAs({
x: [0],
value: [5]
});
// create line chart
chart = anychart.line();
// create first series with mapped data
var series_1 = chart.ohlc(seriesData_1);
volumeScale = anychart.scales.linear();
chart.yAxis(1).scale(volumeScale);
chart.yAxis(1).orientation("right");
// create second series with mapped data
var series_2 = chart.line(seriesData_2);
series_2.yScale(volumeScale);
// draw
chart.container('container').draw();
});
function getData() {
return 'Date,Open,High,Low,Close,Volume\n' +
'2004-08-19,49.96,51.98,47.93,50.12,100\n' +
'2004-08-20,50.69,54.49,50.2,54.1,1200\n' +
'2004-08-23,55.32,56.68,54.47,54.65,110\n' +
'2004-08-24,55.56,55.74,51.73,52.38,111\n' +
'2004-08-25,52.43,53.95,51.89,52.95,105\n' +
'2004-08-26,52.42,53.92,52.28,53.9,100\n' +
'2004-08-27,54.0,54.26,52.79,53.02,90\n'
}
Линке к образцу: http://jsfiddle.net/bdhzrac3/
Я не знаком с Anychart, поэтому я не знаю, есть ли там какие-то встроенные функции, чтобы делать то, что вы хотите. Однако общий подход показан ниже, где текст CSV разбивается на строки, строки разбиваются на "слова", и слова обрабатываются по мере необходимости либо для извлечения года в виде строки, либо для преобразования значения строковых данных в числовое значение. значение данных.
Приведенный ниже код только преобразует входные данные в точном формате, показанном в выходные данные в точном формате. Если формат ввода или вывода изменится, обработку придется изменить соответствующим образом. Тем не менее, приведенный ниже код, по крайней мере, показывает одну стратегию для достижения этой цели.
newline символ помещается в переменную на тот случай, если вам когда-нибудь понадобится обработать данные csv, у которых в конце каждой строки есть символ, отличный от "\n".
const newline = '\n';
const csv =
`
Date,Open,High,Low,Close,Volume
2004-08-19,49.96,51.98,47.93,50.12,
2004-08-20,50.69,54.49,50.2,54.1,
2004-08-23,55.32,56.68,54.47,54.65,
2004-08-24,55.56,55.74,51.73,52.38,
2004-08-25,52.43,53.95,51.89,52.95,
2004-08-26,52.42,53.92,52.28,53.9,
2004-08-27,54.0,54.26,52.79,53.02,
`;
/*
desired format:
['1986', 3.6, 2.3, 2.8, 11.5],
['1987', 7.1, 4.0, 4.1, 14.1],
etc.
*/
const processCSV = csv =>
csv
.replace(RegExp(`^${newline}+`, 'g'), '') // eliminate extra newlines at the beginning
.replace(RegExp(`${newline}+$`, 'g'), '') // eliminate extra newlines at the end
.split(newline) // split the csv string into lines
.slice(1) // eliminate the unnecessary first header line
.map(line => { // process each line
const elmts = line
.replace(/,+$/g, '') // remove any trailing commas
.split(','); // split the line into data elements
const year = elmts[0].slice(0,4); // extract the year from the first element
const data = elmts.slice(1).map(num => +num); // convert all remaining values to numbers
return [year, ...data]; // return the data for each line
});
console.log(JSON.stringify(processCSV(csv)));