堆叠区域Amchart传递动态数据 [英] Stacked Area Amchart passing dynamic data

查看：141 发布时间：2020/10/1 3:04:49 javascript charts amcharts4

本文介绍了堆叠区域Amchart传递动态数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

**参考- https://www.amcharts.com/demos/stacked -area /
它仅在y轴上绘制一个用户，而我希望所有用户的数据都在堆积线区域。

**The reference - https://www.amcharts.com/demos/stacked-area/ It only plots one single user on y axis whereas I want all users data in stacked line area.

我想我需要在数据序列上创建函数，但实际上不知道该怎么做。
我希望X轴为Date，Y轴为显示多行用户的价值标度[A，B，C，D] **

I guess I need to create a function on data series, but really don't know how to do that. I want X axis to be Date , Y axis to be value scale showing multi-line users [A,B,C,D] **

< script >
  var df = [{
    "User": "A",
    "Date": 1570492800000,
    "value_act": 3.4
  }, {
    "User": "B",
    "Date": 1570492800000,
    "value_act": 1.6
  }, {
    "User": "C",
    "Date": 1570492800000,
    "value_act": 4.7
  }, {
    "User": "D",
    "Date": 1570492800000,
    "value_act": 0.0
  }, {
    "User": "A",
    "Date": 1570579200000,
    "value_act": 3.4
  }, {
    "User": "B",
    "Date": 1570579200000,
    "value_act": 1.6
  }, {
    "User": "C",
    "Date": 1570579200000,
    "value_act": 4.7
  }, {
    "User": "D",
    "Date": 1570579200000,
    "value_act": 0.0
  }, {
    "User": "A",
    "Date": 1570838400000,
    "value_act": 3.4
  }, {
    "User": "B",
    "Date": 1570838400000,
    "value_act": 1.6
  }, {
    "User": "C",
    "Date": 1570838400000,
    "value_act": 4.7
  }, {
    "User": "D",
    "Date": 1570838400000,
    "value_act": 0.0
  }]


console.log(df);

am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  var chart = am4core.create("lines1", am4charts.XYChart);

  chart.data = df;

  chart.dateFormatter.inputDateFormat = "yyyy";
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.minGridDistance = 60;
  dateAxis.startLocation = 0.5;
  dateAxis.endLocation = 0.5;
  dateAxis.baseInterval = {
    timeUnit: "Date",
    count: 1
  }

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;


  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "Date";
  series.name = "User";
  series.dataFields.valueY = "value_act";
  series.tooltipText = "[#000]{valueY.value}[/]";
  series.tooltip.background.fill = am4core.color("#FFF");
  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;
  series.tooltip.getFillFromObject = false;
  series.fillOpacity = 0.6;
  series.strokeWidth = 2;
  series.stacked = true;

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.xAxis = dateAxis;
  chart.scrollbarX = new am4core.Scrollbar();

  // Add a legend
  chart.legend = new am4charts.Legend();
  chart.legend.position = "top";

});
// end am4core.ready()
<
/script>

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="lines1"></div>

推荐答案

要有多条线，需要在图表中添加多个系列

to have multiple lines, need to add multiple series to the chart

每个系列需要数据中的特定键

each series needs a specific key in the data

因此，而不是全部都具有 User 的键，< br>
我们需要4个单独的键-> UserA， UserB， UserC， UserD

so, instead of all having a key for "User",
we need 4 separate keys --> "UserA", "UserB", "UserC", "UserD"

var df = [{
  "UserA": "A",
  "Date": 1570492800000,
  "value_act": 3.4
}, {
  "UserB": "B",
  "Date": 1570492800000,
  "value_act": 1.6
}, {
  "UserC": "C",
  "Date": 1570492800000,
  "value_act": 4.7
}, {
  "UserD": "D",
  "Date": 1570492800000,
  "value_act": 0.0
}, {

请参阅以下工作摘要...

see following working snippet...

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

  var df = [{
    "UserA": "A",
    "Date": 1570492800000,
    "value_act": 3.4
  }, {
    "UserB": "B",
    "Date": 1570492800000,
    "value_act": 1.6
  }, {
    "UserC": "C",
    "Date": 1570492800000,
    "value_act": 4.7
  }, {
    "UserD": "D",
    "Date": 1570492800000,
    "value_act": 0.0
  }, {
    "UserA": "A",
    "Date": 1570579200000,
    "value_act": 3.4
  }, {
    "UserB": "B",
    "Date": 1570579200000,
    "value_act": 1.6
  }, {
    "UserC": "C",
    "Date": 1570579200000,
    "value_act": 4.7
  }, {
    "UserD": "D",
    "Date": 1570579200000,
    "value_act": 0.0
  }, {
    "UserA": "A",
    "Date": 1570838400000,
    "value_act": 3.4
  }, {
    "UserB": "B",
    "Date": 1570838400000,
    "value_act": 1.6
  }, {
    "UserC": "C",
    "Date": 1570838400000,
    "value_act": 4.7
  }, {
    "UserD": "D",
    "Date": 1570838400000,
    "value_act": 0.0
  }]

am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  var chart = am4core.create("lines1", am4charts.XYChart);

  chart.data = df;

  chart.dateFormatter.inputDateFormat = "yyyy";
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.minGridDistance = 60;
  dateAxis.startLocation = 0.5;
  dateAxis.endLocation = 0.5;
  dateAxis.baseInterval = {
    timeUnit: "Date",
    count: 1
  }

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;


  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "Date";
  series.name = "UserA";
  series.dataFields.valueY = "value_act";
  series.tooltipText = "[#000]{valueY.value}[/]";
  series.tooltip.background.fill = am4core.color("#FFF");
  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;
  series.tooltip.getFillFromObject = false;
  series.fillOpacity = 0.6;
  series.strokeWidth = 2;
  series.stacked = true;

  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "Date";
  series.name = "UserB";
  series.dataFields.valueY = "value_act";
  series.tooltipText = "[#000]{valueY.value}[/]";
  series.tooltip.background.fill = am4core.color("#FFF");
  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;
  series.tooltip.getFillFromObject = false;
  series.fillOpacity = 0.6;
  series.strokeWidth = 2;
  series.stacked = true;

  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "Date";
  series.name = "UserC";
  series.dataFields.valueY = "value_act";
  series.tooltipText = "[#000]{valueY.value}[/]";
  series.tooltip.background.fill = am4core.color("#FFF");
  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;
  series.tooltip.getFillFromObject = false;
  series.fillOpacity = 0.6;
  series.strokeWidth = 2;
  series.stacked = true;

  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "Date";
  series.name = "UserD";
  series.dataFields.valueY = "value_act";
  series.tooltipText = "[#000]{valueY.value}[/]";
  series.tooltip.background.fill = am4core.color("#FFF");
  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;
  series.tooltip.getFillFromObject = false;
  series.fillOpacity = 0.6;
  series.strokeWidth = 2;
  series.stacked = true;

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.xAxis = dateAxis;
  chart.scrollbarX = new am4core.Scrollbar();

  // Add a legend
  chart.legend = new am4charts.Legend();
  chart.legend.position = "top";

});

});

#lines1 {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="lines1"></div>

编辑

动态创建单独的系列，

首先返回到原始数据集，

，其中每行具有相同的 User 键，但值不同。

to build the separate series dynamically,
let's first revert back to the original dataset,
where each row has the same "User" key with a different value.

var df = [{
  "User": "A",
  "Date": 1570492800000,
  "value_act": 3.4
}, {
  "User": "B",
  "Date": 1570492800000,
  "value_act": 1.6
}, {
  "User": "C",
  "Date": 1570492800000,
  "value_act": 4.7
}, {
...

首先，我们使用数组来查找不同的用户值。 （A，B，C，D等...）

在此例程中，我们还修改了数据，以创建单独的键

换句话说，我们通过附加值-> UserA
$ b $创建新键b并删除原始的用户 密钥（尽管可能没有必要）。

first, we use an array to find the distinct user values. (A, B, C, D, etc...)
in this routine, we also modify the data, to create the separate keys we need for each series.
in other words, we create a new key by appending the value --> "UserA"
and delete the original "User" key (although this may not be necessary).

var distinctUsers = [];
df.forEach(function (row, index) {
  // find distinct user values
  if (distinctUsers.indexOf(row.User) === -1) {
    distinctUsers.push(row.User);
  }

  // create new key
  df[index]['User' + row.User] = row.User;

  // delete old key
  delete df[index].User;
});

接下来，我们需要合并行，以使每个日期只有一行，

如下...

next, we need to combine rows, such that each date has only one row,
as follows...

var df = [{
  "UserA": 3.4,
  "UserB": 1.6,
  "UserC": 4.7,
  "UserD": 0.0,
  "Date": 1570492800000,
}, {
  "UserA": 3.4,
  "UserB": 1.6,
  "UserC": 4.7,
  "UserD": 0.0,
  "Date": 1570579200000,
}, {
  "UserA": 3.4,
  "UserB": 1.6,
  "UserC": 4.7,
  "UserD": 0.0,
  "Date": 1570838400000,
}];

我们可以为此使用map方法...

we can use the map method for this...

// combine date rows
df = distinctDates.map(function (date) {
  // build new combined row
  var combinedRow = {
    Date: date
  };

  // add user values for date
  distinctUsers.forEach(function (user) {
    df.forEach(function (row) {
      if ((row.hasOwnProperty("User" + user)) && (row.Date === date)) {
        combinedRow["User" + user] = row["User" + user];
      }
    });
  });

  return combinedRow;
});

然后我们使用不同值的数组，

创建每个唯一的序列。

then we use the array of distinct values,
to create each unique series.

// create unique series
distinctUsers.forEach(function (user) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "Date";
  series.name = "User" + user;  // <-- use new key for series
  series.dataFields.valueY = "value_act";
  series.tooltipText = "[#000]{valueY.value}[/]";
  series.tooltip.background.fill = am4core.color("#FFF");
  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;
  series.tooltip.getFillFromObject = false;
  series.fillOpacity = 0.6;
  series.strokeWidth = 2;
  series.stacked = true;
});

请参阅以下工作摘要...

see following working snippet...

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
  var df = [{
    "User": "A",
    "Date": 1570492800000,
    "value_act": 3.4
  }, {
    "User": "B",
    "Date": 1570492800000,
    "value_act": 1.6
  }, {
    "User": "C",
    "Date": 1570492800000,
    "value_act": 4.7
  }, {
    "User": "D",
    "Date": 1570492800000,
    "value_act": 0.0
  }, {
    "User": "A",
    "Date": 1570579200000,
    "value_act": 3.4
  }, {
    "User": "B",
    "Date": 1570579200000,
    "value_act": 1.6
  }, {
    "User": "C",
    "Date": 1570579200000,
    "value_act": 4.7
  }, {
    "User": "D",
    "Date": 1570579200000,
    "value_act": 0.0
  }, {
    "User": "A",
    "Date": 1570838400000,
    "value_act": 3.4
  }, {
    "User": "B",
    "Date": 1570838400000,
    "value_act": 1.6
  }, {
    "User": "C",
    "Date": 1570838400000,
    "value_act": 4.7
  }, {
    "User": "D",
    "Date": 1570838400000,
    "value_act": 0.0
  }];

  // find distinct users & dates, apply value to user key
  var distinctUsers = [];
  var distinctDates = [];
  df.forEach(function (row, index) {
    // find distinct user values
    if (distinctUsers.indexOf(row.User) === -1) {
      distinctUsers.push(row.User);
    }

    // find distinct date values
    if (distinctDates.indexOf(row.Date) === -1) {
      distinctDates.push(row.Date);
    }

    // create new key
    df[index]['User' + row.User] = row.value_act;

    // delete old key
    delete df[index].User;
  });

  // combine date rows
  df = distinctDates.map(function (date) {
    // build new combined row
    var combinedRow = {
      Date: date
    };

    // add user values for date
    distinctUsers.forEach(function (user) {
      df.forEach(function (row) {
        if ((row.hasOwnProperty("User" + user)) && (row.Date === date)) {
          combinedRow["User" + user] = row["User" + user];
        }
      });
    });

    return combinedRow;
  });


am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  var chart = am4core.create("lines1", am4charts.XYChart);

  chart.data = df;

  chart.dateFormatter.inputDateFormat = "yyyy";
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.minGridDistance = 60;
  dateAxis.startLocation = 0.5;
  dateAxis.endLocation = 0.5;
  dateAxis.baseInterval = {
    timeUnit: "Date",
    count: 1
  }

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;

  // create unique series
  distinctUsers.forEach(function (user) {
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "Date";
    series.name = "User" + user;
    series.dataFields.valueY = "User" + user;
    series.tooltipText = "[#000]{valueY.value}[/]";
    series.tooltip.background.fill = am4core.color("#FFF");
    series.tooltip.getStrokeFromObject = true;
    series.tooltip.background.strokeWidth = 3;
    series.tooltip.getFillFromObject = false;
    series.fillOpacity = 0.6;
    series.strokeWidth = 2;
    series.stacked = true;
  });

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.xAxis = dateAxis;
  chart.scrollbarX = new am4core.Scrollbar();

  // Add a legend
  chart.legend = new am4charts.Legend();
  chart.legend.position = "top";

});

});

#lines1 {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="lines1"></div>

这篇关于堆叠区域Amchart传递动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

堆叠区域Amchart传递动态数据 [英] Stacked Area Amchart passing dynamic data

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

堆叠区域Amchart传递动态数据 [英] Stacked Area Amchart passing dynamic data

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭