JavaScriptを使用して特定の形式にCSVを変換しますか？

私は、この例のオフに働いている：JavaScriptを使用して特定の形式にCSVを変換しますか？

<!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形式です。この正確なスタイルを使用して、CSVデータまたはJSON形式のデータをインポートできる機能がAnychartにありますか？

もしそうでない場合は、自動的に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,

出典

2017-06-23 sgerbhctim

不要な情報やコードをあまりにも多く提供しているため、質問に答えようとする人が少なくなります。 [最小限で完全で検証可能な質問をする方法]（https://stackoverflow.com/help/mcve）を読んで、特に質問が「最小限」であることに注意してください。 –

あなたはフォーマットせずAnyChartでCSVデータを使用することができ、ドキュメントのそれについての記事があります：https://docs.anychart.com/7.14.0/Working_with_Data/Data_From_CSV

Hererは、あなたの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/

出典

2017-06-24 11:33:06

を私はAnychartに慣れていないよ、あなたがやりたいが任意の組み込み機能があるかどうかはわかりません。ただし、csvテキストを行に分割し、行を「単語」に分割し、単語を必要に応じて処理して、年を文字列として抽出するか、文字列データ値を数値に変換する一般的な方法を示しますデータ値。

以下のコードのみ正確な形式の入力データは、出力データを示す正確な形式ににを示す変換します。入力または出力のいずれかのフォーマットが変更された場合、処理を適切に変更する必要があります。しかし、以下のコードは、少なくともそれを達成するための戦略を示しています。

newline文字は、各行の最後に "\ n"以外の文字を持つcsvデータを処理する必要がある場合に備えて、変数内に配置されます。

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)));

出典

2017-06-24 00:05:41

JavaScriptを使用して特定の形式にCSVを変換しますか？

答えて

関連する問題