Question

我已经搜索了一个解决方案的高低，发现很多人都在问这个问题，但没有答案。我正在尝试更改此示例以使用外部数据：https://www.amcharts.com/kbase/making-stock-charts-period-selector-input-fields-read-only/

是否可以将多个CSV中的数据加载到一个数组中然后将每个集合应用到图表数据集？这个代码可能会起作用，但它会挂在别的东西上。

我收到了控制台错误：

GET http://www.example.com/1 404 (Not found) dataloader.min.js 1

GET http://www.example.com/2 404 (Not found) dataloader.min.js 1

GET http://www.example.com/0 404 (Not found) dataloader.min.js 1

GET http://www.example.com/3 404 (Not found) dataloader.min.js 1

谢谢！

像这样......

var dataSets = [];
var files = ['1.csv', '2.csv', '3.csv', '4.csv'];

for(var fileid in files) {
    AmCharts.loadFile(fileid, {}, function(    response ) {

        /**
        * Parse CSV
        */
 var data = AmCharts.parseCSV( response, {
    "useColumnNames": true
    } );
 dataSets.push(data);
 });
}

（不确定是否使用“dataLoader”或“dataProvider”）

var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
//"dataProvider": dataSets,

pathToImages: "https://www.amcharts.com/lib/3/images/",

   dataSets: [{
   title: "first data set",
   fieldMappings: [{
   fromField: "value",
   toField: "value"
   }, {
   fromField: "rank",
   toField: "rank"
   }],
   dataLoader: dataSets[0],
   categoryField: "date"
   },

 {
  title: "second data set",
  fieldMappings: [{
  fromField: "value",
  toField: "value"
 }, {
  fromField: "rank",
  toField: "rank"
  }],
dataLoader: dataSets[1],
categoryField: "date"
},

{
  title: "third data set",
  fieldMappings: [{
  fromField: "value",
  toField: "value"
}, {
  fromField: "rank",
  toField: "rank"
}],
dataLoader: dataSets[2],
categoryField: "date"
},

{
  title: "fourth data set",
  fieldMappings: [{
  fromField: "value",
  toField: "value"
}, {
  fromField: "rank",
  toField: "rank"
}],
 dataLoader: dataSets[3],
 categoryField: "date"
}

],

Answer 1

仅供参考，您的for in循环错误。 fileid变量是数组的索引，这就是获得0,1,2和3的原因。请考虑使用Array.forEach()代替，它具有您正在寻找的逻辑。

在任何情况下，您都不想使用loadFile方法，因为您可以在股票图表中的每个数据集中指定dataLoader，类似于每个数据集具有自己的dataProvider的方式，例如：

AmCharts.makeChart("chartdiv", {
  // ...
  dataSets: [{
     // ...
     dataLoader: {
       url: "/path/to/csvfile",
       format: "csv",
       useColumnNames: true
     },
     // ...
  },
  // repeat for each dataSet as needed
  ]
});

您可以在its github repository中找到有关如何使用dataLoader的文档。

在您的情况下，您的makeChart调用看起来与此类似：

var chart = AmCharts.makeChart("chartdiv", {
  type: "stock",
  "theme": "none",

  pathToImages: "https://www.amcharts.com/lib/3/images/",

  dataSets: [{
      title: "first data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
        url: "/path/to/1.csv",
        format: "csv",
        useColumnNames: true
      },
      categoryField: "date"
    },

    {
      title: "second data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
        url: "/path/to/2.csv",
        format: "csv",
        useColumnNames: true
      }
      categoryField: "date"
    },

    {
      title: "third data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
        url: "/path/to/3.csv",
        format: "csv",
        useColumnNames: true
      },
      categoryField: "date"
    },

    {
      title: "fourth data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
        url: "/path/to/4.csv",
        format: "csv",
        useColumnNames: true
      },
      categoryField: "date"
    }

  ],
  // ...
});

请注意，useColumnNames将获取第一行中列的名称，并在填充每个dataSet中的dataProvider数组时使用它们。确保文件中包含date，rank和value的标题行。

使用amCharts“Amcharts.loadfile”数据加载器从多个CSV文件中提取图表数据

1 个答案: