个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 将 CSV 转换为特定格式？

转载 作者：行者123 更新时间：2023-12-03 04:00:56 26 4
gpt4 key购买 nike

我正在研究这个例子:

<!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,

最佳答案

您可以在 AnyChart 中使用 CSV 数据而无需格式化，文档中有一篇关于它的文章: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/

关于javascript - 使用 JavaScript 将 CSV 转换为特定格式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44726942/

26 4 0
文章推荐： javascript - 将节点请求模块与 AWS Lambda 和 API Gateway 结合使用
文章推荐： javascript - 将 jsPDF 与 Electron 结合使用
文章推荐： javascript - 如何编写一个简洁的 JS if else 语句来通过 Cocoon 动态添加嵌套的 Rails simple_form？
文章推荐： javascript - 简单js模块的定义文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com