Question

我正在使用这个例子：

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

Answer 1

您可以将CSV数据与AnyChart一起使用而不进行格式化，文档中有一篇关于它的文章：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'
}

Linke示例：http://jsfiddle.net/bdhzrac3/

Answer 2

我对Anychart不熟悉，所以我不知道是否有任何内置功能可以做你想做的事情。但是，下面显示了一个通用方法，其中csv文本被分成行，这些行被分成＆＃34;单词＆＃34;，并且根据需要处理单词以将年份提取为字符串或转换字符串数据值转换为数值数据。

以下代码仅将输入数据以所示的确切格式转换为输出数据，其格式为。如果输入或输出的格式发生变化，则必须适当地更改处理。但是，下面的代码至少显示了如何实现这一目标的一种策略。

newline字符放在变量中，以防万一你必须处理的字符串数不是＆＃34; \ n＆＃34;在每一行的末尾。

＆＃13;

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

＆＃13;

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

2 个答案: