0

我正在处理这个例子：

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

2 回答 2

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'
}

链接到示例：http: //jsfiddle.net/bdhzrac3/

于 2017-06-24T11:33:06.647 回答
0

我不熟悉 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-24T00:05:41.373 回答