AMCharts-使用与图表创建时使用的数据不同的数据源进行CSV导出
创始人
2024-09-30 06:00:26
0

要使用不同的数据源进行CSV导出,您可以使用AMCharts的CSV导出功能,并在导出时使用不同的数据源。以下是一个使用JavaScript代码示例的解决方法:

// 创建一个包含图表数据的数组
var chartData = [
  {
    category: "Category 1",
    value: 10
  },
  {
    category: "Category 2",
    value: 20
  },
  {
    category: "Category 3",
    value: 30
  }
];

// 创建一个包含导出数据的数组(不同的数据源)
var exportData = [
  {
    category: "Category A",
    value: 100
  },
  {
    category: "Category B",
    value: 200
  },
  {
    category: "Category C",
    value: 300
  }
];

// 创建图表
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = chartData;

// 创建数据列
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Value";

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
series.name = "Series 1";

// 创建CSV导出按钮
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.items = [
  {
    label: "Export as CSV",
    menu: [
      {
        label: "Export with Chart Data",
        click: function() {
          chart.exporting.exportCSV("chartData.csv");
        }
      },
      {
        label: "Export with Different Data",
        click: function() {
          // 将图表数据替换为不同的数据源
          chart.data = exportData;
          chart.exporting.exportCSV("exportData.csv");
          // 将图表数据恢复为原始数据
          chart.data = chartData;
        }
      }
    ]
  }
];

在这个示例中,我们首先创建了一个包含图表数据的数组chartData和一个包含导出数据的数组exportData。然后,我们使用am4core.create方法创建了一个图表,并将chartData作为图表的数据源。

接下来,我们使用am4charts.CategoryAxisam4charts.ValueAxis创建了一个类别轴和一个值轴,并使用am4charts.ColumnSeries创建了一个数据列。最后,我们使用am4core.ExportMenu创建了一个CSV导出按钮,并在按钮点击事件中实现了不同数据源的导出。

在点击“Export with Different Data”按钮时,我们将图表数据替换为exportData,然后使用chart.exporting.exportCSV方法导出CSV文件。最后,我们将图表数据恢复为原始数据chartData

您可以根据您的实际需求修改和调整代码示例。希望对您有帮助!

相关内容

热门资讯

代打辅助挂!wepoker有辅... 代打辅助挂!wepoker有辅助插件吗(透视)微乐小程序游戏辅助器脚本官网(好像有辅助神器)-哔哩哔...
近日!wpk有那种辅助吗(透视... 近日!wpk有那种辅助吗(透视)微乐a3纸牌有脚本(其实真的是有辅助脚本)-哔哩哔哩1.wpk有那种...
今年以来!黑侠破解wepoke... 今年以来!黑侠破解wepoker(透视)微乐麻将脚本透视(一直是真的辅助方法)-哔哩哔哩1、黑侠破解...
长期以来!wepoker有辅助... 长期以来!wepoker有辅助插件吗(透视)微乐广西小程序开发(一贯是有辅助插件)-哔哩哔哩亲,关键...
透视软件!wepoker有辅助... 透视软件!wepoker有辅助工具吗(透视)微信小程序微乐房间透视(都是存在有辅助挂)-哔哩哔哩1、...
透视实锤!cloudpoker... 透视实锤!cloudpoker怎么开挂(透视)手机微乐小程序破解器(一贯真的是有辅助攻略)-哔哩哔哩...
有了最新消息!拱趴大菠萝开挂方... 有了最新消息!拱趴大菠萝开挂方法(透视)微乐云南小程序修改器ios(本来是真的辅助软件)-哔哩哔哩1...
据文件显示!wepoker有什... 据文件显示!wepoker有什么规律(透视)微乐小程序辅助工具免费版(一贯是真的辅助神器)-哔哩哔哩...
透视脚本!wepoker怎么破... 透视脚本!wepoker怎么破解游戏(透视)提高微乐运气的方法(总是是真的辅助攻略)-哔哩哔哩1、许...
透视辅助!如何判断wpk辅助软... 透视辅助!如何判断wpk辅助软件的真假(透视)微乐广西小程序开挂(一贯真的有辅助器)-哔哩哔哩如何判...