标签: amcharts5
Amcharts5 - 错误你不能在同一个 DOM 节点上有多个根 - React 17
我想在我的 React 应用程序中使用 amcharts5 创建图表。
我在我的应用程序组件中导入的组件中实例化 amcharts5 的根元素。我收到以下错误
You cannot have multiple Roots in the same DOM node
这是我的版本：
"react": "^17.0.2"
"@amcharts/amcharts5": "^5.1.1"
这是我的代码：
import { useLayoutEffect } from 'react'
import * as am5 from '@amcharts/amcharts5'
export default function AmCharts5() {
useLayoutEffect(() => {
let root = am5.Root.new('chartdiv')
// root.current = root
// here is a second Error : Property 'current' does not exist on type 'Root'
return () => {
root.dispose()
}
}, [])
return <div id="chartdiv" style={{ width: …8
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Amcharts5第二次调用函数绘制图表时出错
我调用此函数将饼图绘制到模态窗口内 ID 为“animating-donut”的 div 中。
第一次它有效，但是当第二次单击时我收到这些错误并且图表不显示
- 未捕获错误：同一个 DOM 节点上不能有多个根
- 未捕获的类型错误：无法读取未定义的属性（读取“_display”）
无论如何，我不认为这些错误会导致图表第二次不像第一次显示时那样显示，即使存在这些错误 -
谢谢
这是我的功能
function donutam(donutdatalabel,donutdataseries){
//Pie View;
root = am5.Root.new("animating-donut");
// Set themes
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
// Create series
var series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category"
}));
// Set data
var serie = donutdataseries.split(',');
var labels = donutdatalabel.split(',');
var seriesarr = [];
for (i = 0; i < serie.length; i++) {
seriesarr[i] = {value: serie[i], category: …4
推荐指数
推荐指数
1
解决办法
解决办法
4305
查看次数
查看次数
如何使用 AMCharts V5 添加 X 轴和 Y 轴标题
我正在使用 amCharts 版本 5。如何沿 xAxis 和 y Axis 添加标签。我正在使用 ValueAxis（在 XY 图表中）。附上下面的图片以便更好地理解
我能够找到有关如何在 V4 中实现它的文档，但在 V5 中却找不到。
在 V4 中：
valueAxis.title.text = "营业额 ($M)";
2
推荐指数
推荐指数
1
解决办法
解决办法
1824
查看次数
查看次数
Amcharts 5 删除 y 轴
我正在尝试从图表中删除 Y 轴。我成功地移除了 X 轴。删除 Y 轴的原因是因为图形将显示在一个小区域中。
这就是我现在所拥有的：
我删除了图像上的 Y 轴。这就是我试图实现的目标：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>visits_per_week_last_2_years</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="chartdiv_visits_per_week_last_two_years" style="width: 100%;height: 80vh;"></div>
<script src="../../_admin/_javascripts/amcharts/index.js"></script>
<script src="../../_admin/_javascripts/amcharts/xy.js"></script>
<script src="../../_admin/_javascripts/amcharts/themes/Animated.js"></script>
<script src="visits_per_week_last_2_years_K7MRCJnv8nRrBIMGVNkZ.js"></script>
</body>
</html>
JavaScript：
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var rootA = am5.Root.new("chartdiv_visits_per_week_last_two_years");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
rootA.setThemes([
am5themes_Animated.new(rootA)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
panX: false,
panY: false,
layout: rootA.verticalLayout
}));
// Add legend …1
推荐指数
推荐指数
1
解决办法
解决办法
2843
查看次数
查看次数
无法将 amchart5 中的标签从百分比更改为数字
我正在使用新的 amcharts5，尽管引用了我的旧代码和其他链接，但我似乎无法将饼图“切片”和标签更改为纯数字。
基本上我的代码和图表加载，但问题是我的值是用百分比而不是数字来描述的。这是我下面的代码，我试图解决这个问题。
任何帮助将不胜感激。
// Set data
series.data.setAll([
{ value: Type[0], category: "Type 1" },
{ value: Type[1], category: "Type 2" },
{ value: Type[2], category: "Type 3" },
]);
// Create legend
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.labels.template.text = "{category}: {value.value}";
legend.slices.template.tooltipText = "{category}: {value.value}";
chart.legend.valueLabels.template.text = "{value.value}";
legend.data.setAll(series.dataItems);
问候
0
推荐指数
推荐指数
1
解决办法
解决办法
1561
查看次数
查看次数