堆叠区域Amchart传递动态数据
**参考-
它只在y轴上绘制一个用户，而我希望所有用户的数据都在堆积线区域。
我想我需要在数据序列上创建一个函数，但是真的不知道该怎么做。 我希望X轴为Date，Y轴为显示多行用户[A，B，C，D] **的值标度**
<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>{{1}}
1 个答案:
答案 0 :(得分：1)
要具有多条线，需要向图表添加多个系列
每个系列都需要数据中的特定键
因此，不是所有人都拥有"User"的密钥，
我们需要4个单独的键-> "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
}, {
请参阅以下工作片段...
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"键，但值不同。
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, etc...)
在此例程中，我们还修改了数据，以创建每个系列所需的单独键。
换句话说，我们通过附加值-> "UserA"
来创建新键
并删除原始的"User"键（尽管可能没有必要）。
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;
});
接下来，我们需要合并行，以使每个日期只有一行，
如下...
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方法...
// 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;
});
然后我们使用不同值的数组，
创建每个独特的系列。
// 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;
});
请参阅以下工作片段...
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？