amcharts 相关问题

JavaScript图表和映射控件。

添加许多系列后,amcharts5 地图性能较差

我有20多个组,所有组中都很少有国家(在下面的示例中,每个组大多有一个国家,但这只是一个例子)。 问题是测试人员后悔滚动...

回答 1 投票 0

amcharts Candlestick 自定义蜡烛的上下颜色

我一直在尝试改变烛台的颜色,我想要一个更深版本的绿色/红色,但以防万一我是色盲,我添加了灰色只是为了让它更引人注目...

回答 1 投票 0

我们可以使用下拉菜单更改 amCharts 中的图表类型吗?

假设我最初加载了饼图,我希望用户从下拉列表中将其更改为折线图或任何其他类型的图表。我们如何在 amCharts 中实现它?我在 HighCharts 中看到过,但没有……

回答 1 投票 0

amCharts 5 工具提示未显示在线条系列上

我正在尝试获取显示此折线图和数据集的工具提示,每次我输入自己的数据时,它都会删除折线图,并且我在文档中找不到任何关于为什么会这样的内容

回答 1 投票 0

如何使用Am4charts连接单个图表上的图形数据?

下面的图像是我试图开发的。按响应中存在的类型键分隔图表,并且具有相同日期数据的多个支付周期是否仍然显示它们

回答 1 投票 0

如何使用 Angular17 在世界地图中显示可观察函数的值数组

我需要一些帮助。我有一个带有 Angular 的 amChart 世界地图,我也有一个可观察的函数,我可以在控制台中显示从 firestore 获取的值,但我无法在地图中显示。

回答 2 投票 0

AmCharts DateAxis 不使用指定的间隔

我正在使用 AmCharts 显示多行。我的图表数据是每日数据,其中 x 作为 Unix 时间戳(以秒为单位): { 第 1 行:[{x:UNIX_TIMESTAMP_SECONDS,y:NUMERICAL_VALUE},...] 第2行:[{x:

回答 1 投票 0

Amcharts5 XY 图表更改列下 xlabel 的颜色

我有这个用 Amcharts5 创建的 XYChart: 我想更改 xlabel 的颜色,如下所示: 这是我的代码: 我有这个用 Amcharts5 创建的 XYChart: 我想更改 xlabel 的颜色,如下所示: 这是我的代码: <!DOCTYPE html> <html lang="en-US"> <head> <title>Graph</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> </head> <body> <!-- Amcharts --> <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/xy.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <!-- //Amcharts --> <!-- Chart code ::per_month --> <script> am5.ready(function() { // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var rootA = am5.Root.new("chartdiv_per_month"); // 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 })); // Set data var data = [{ xlabelXYChart: "Aug", value1: 52 },{ xlabelXYChart: "Sep", value1: 53 },{ xlabelXYChart: "Oct", value1: 54 },{ xlabelXYChart: "Nov", value1: 56 },{ xlabelXYChart: "Dec", value1: 56 },{ xlabelXYChart: "Jan", value1: 56 }]; // Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, { categoryField: "xlabelXYChart", renderer: am5xy.AxisRendererX.new(rootA, { minGridDistance: 70, minorGridEnabled: true }), tooltip: am5.Tooltip.new(rootA, {}), stroke: am5.color(0xFFFFFF), visible: true })); xAxis.data.setAll(data); var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, { renderer: am5xy.AxisRendererY.new(rootA, {}), stroke: am5.color(0xFFFFFF), visible: false })); // Add series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ function makeSeries(name, fieldName) { var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "xlabelXYChart" })); series.columns.template.setAll({ tooltipText: "{categoryX} {name}: {valueY}", width: am5.percent(90), tooltipY: 0, fill: "#2b4356", // fill colors of bars stroke: "#67b7dc" // stroke around bars }); series.data.setAll(data); // Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ series.appear(); series.bullets.push(function () { return am5.Bullet.new(rootA, { locationX: 0.5, locationY: 1.25, sprite: am5.Label.new(rootA, { centerX: am5.p50, centerY: am5.p50, text: "{value1}", fill: am5.color(0xbbd6e3), // Values over graph bars populateText: true }) }); }); //legendA.data.push(series); } makeSeries("Assets", "value1"); }); // end am5.ready() </script> <div id="chartdiv_per_month" style="width: 100%;height: 160px;"></div> <!-- //Chart code :: per_month --> </body> </html> 什么参数可以帮助我改变xlabel的颜色?我尝试查看 color 的手册,但是我不清楚要更改哪些参数。我还查看了AxisLabel,它说“填充”是文本颜色。如果这是正确的,那么我应该在哪里填写我的代码? 根据提供的代码,实现更改amcharts x轴标签颜色所需的功能,可以使用以下代码: xAxis.get("renderer").labels.template.setAll({ fill: '#ff0000' }); 以下代码为更新代码。 <!DOCTYPE html> <html lang="en-US"> <head> <title>Graph</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> </head> <body> <!-- Amcharts --> <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/xy.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <!-- //Amcharts --> <!-- Chart code ::per_month --> <script> am5.ready(function() { // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var rootA = am5.Root.new("chartdiv_per_month"); // 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 })); // Set data var data = [{ xlabelXYChart: "Aug", value1: 52 },{ xlabelXYChart: "Sep", value1: 53 },{ xlabelXYChart: "Oct", value1: 54 },{ xlabelXYChart: "Nov", value1: 56 },{ xlabelXYChart: "Dec", value1: 56 },{ xlabelXYChart: "Jan", value1: 56 }]; // Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, { categoryField: "xlabelXYChart", renderer: am5xy.AxisRendererX.new(rootA, { minGridDistance: 70, minorGridEnabled: true }), tooltip: am5.Tooltip.new(rootA, {}), stroke: am5.color(0xFFFFFF), visible: true })); xAxis.data.setAll(data); xAxis.get("renderer").labels.template.setAll({ fill: '#ff0000' }); var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, { renderer: am5xy.AxisRendererY.new(rootA, {}), stroke: am5.color(0xFFFFFF), visible: false })); // Add series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ function makeSeries(name, fieldName) { var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "xlabelXYChart" })); series.columns.template.setAll({ tooltipText: "{categoryX} {name}: {valueY}", width: am5.percent(90), tooltipY: 0, fill: "#2b4356", // fill colors of bars stroke: "#67b7dc" // stroke around bars }); series.data.setAll(data); // Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ series.appear(); series.bullets.push(function () { return am5.Bullet.new(rootA, { locationX: 0.5, locationY: 1.25, sprite: am5.Label.new(rootA, { centerX: am5.p50, centerY: am5.p50, text: "{value1}", fill: am5.color(0xbbd6e3), // Values over graph bars populateText: true }) }); }); //legendA.data.push(series); } makeSeries("Assets", "value1"); }); // end am5.ready() </script> <div id="chartdiv_per_month" style="width: 100%;height: 160px;"></div> <!-- //Chart code :: per_month --> </body> </html>

回答 1 投票 0

如何将AmCharts 5 X轴标签定位到右侧?

我已在条形图中添加了 x 轴标签,但我希望它位于 x 轴旁边,而不是底部。 这就是我现在所拥有的: 但我希望它是这样的: 我尝试过的: xAxis.ch...

回答 1 投票 0

Amcharts5 XY 图表显示列上的值和列下的 xlabel

我有这个 XY 图表: 我想显示列上的值以及列下的 xlabel: 这是我的代码: <

回答 1 投票 0

AmCharts 5 - 调整 xAxis - 数字到年份

我在 AmCharts 5 中生成了一个图表,我需要帮助转换图表的 x 轴。这样 X 轴将由年份组成(今天它生成为 2.014, 2.015, 2.016 a...

回答 1 投票 0

AMcharts 5 将数据添加到工具提示

我有像这样的xAxis和xRenderer: 让 xRenderer = amChartXY.AxisRendererX.new(root, {minGridDistance: 30}); xRenderer.labels.template.setAll({ 旋转:-45, ...

回答 1 投票 0

amCharts 4 的导出菜单中添加平均数据选项

我正在尝试找到一种方法,使用 amCharts 4 中的导出菜单快速平均每周或每月的数据。我制作了这个 codePen,但它不起作用。 有人可以看看我是什么样的吗...

回答 1 投票 0

如何更改Amcharts 5中的导出图标?

我知道在 Amcharts 4 中,您可以按照此操作更改导出图标:https://www.amcharts.com/docs/v4/tutorials/replacing-default-export-icon/ 但是,同样的任务在 Amc 上是如何完成的......

回答 1 投票 0

以编程方式隐藏系列/切换图例项目 (amcharts 4)

在我们的项目中,我们有一个带有图例的折线图。图表及其图例都在单独的容器中初始化(如果这一事实很重要)。 在我们的项目中,我们有一个带有图例的折线图。图表及其图例都在单独的容器中初始化(如果这一事实很重要)。 <div ref="chartdiv" /> <div ref="legenddiv" /> 我们使用 createFromConfig 方法创建它们。 我想要实现的目标:我们在页面上有多个选项卡,用户通常会切换图例项目来显示/隐藏某些系列。我需要存储这些切换的图例项目,以便当用户返回带有图表的选项卡时,我将能够以编程方式将它们切换回来。 根据我的理解,算法如下: 将切换的项目存储在某处 启动图表时,切换之前切换的项目。据我所知,应该通过显示/隐藏系列来完成,而不是图例项目。 到目前为止,我已经通过向图例项添加单击处理程序来设法存储标签。 chart.value.legend.itemContainers.template.events.on('hit', (ev) => { toggledItems.push(ev.target.dataItem.name) }) 但是我没有成功隐藏以前切换的图例项目。我尝试根据堆栈溢出上的this question实现一些东西,我尝试使用“inited”,“hidden”,“shown”事件,但对它们没有反应。 // Nothing happens here ☹️ chart.value.series.template.events.on('hidden', () => { console.log('I am hidden') }) 请为我指明正确的方向。 找到解决方案。希望这会对某人有所帮助。 我们的项目中有一个 Line 图表组件。我添加了一个 toggleSeries 道具 - 用于切换图例/系列项目的 v 模型,它存储字符串(名称)。因此,当我们单击图例项时,我们输入该图例项的名称并更新 toggleSeries v 模型。 有双向绑定,我们可以初始化一个在 toggleSeries 数组中已有项目的图表,或者我们可以随时从 Line 组件外部放置项目 - 图表将被更新。 // Is used for toggling series in chart's 'beforevalidated' hook const toggleSeries = (initial?: boolean) => { for (const currentSeries of chart.value.series.values) { if (toggledSeriesInternal.value.includes(currentSeries.dataFields.valueY)) { if (initial) { currentSeries.hidden = true } else { currentSeries.hide() } } else { if (initial) { currentSeries.hidden = false } else { currentSeries.show() } } } } // Is used for toggling single series items === pushing/removing item names // from 'toggledSeries' array const toggleSeriesItem = (itemName: string) => { const index = toggledSeriesInternal.value.findIndex(name => name === itemName) if (index === -1) { toggledSeriesInternal.value = [...toggledSeriesInternal.value, itemName] } else { const newToggledSeries = [...toggledSeriesInternal.value] newToggledSeries.splice(index, 1) toggledSeriesInternal.value = newToggledSeries } } chart.value.events.on('beforevalidated', () => { toggleSeries(true) }) chart.value.legend.itemContainers.template.events.on('hit', (ev) => { toggleSeriesItem((ev.target.dataItem as am4core.DataItem & { name: string }).name) }) watch(toggledSeriesInternal, () => { toggleSeries() }, { deep: true, })

回答 1 投票 0

对 amCharts 的数据进行平均

我正在使用 amCharts 4,我想知道是否可以按周或月平均数据。我想将其集成到我的 exporting.menu.items 中。 我知道可以使用 groupIn...

回答 1 投票 0

amcharts5 - 使用自定义函数格式化工具提示中的值

我正在使用 amcharts5 来表示一些数据。在某个时刻,我有一个系列,我想以与原始值不同的方式显示工具提示。 举例来说,我的图表是...

回答 1 投票 0

IcCube Reporting V8 - 可以使用甘特图吗?

使用 IcCube Reporting V7,我能够创建 AmCharts 甘特图,如下所示: 在幕后使用以下 mdx: 成员 HDebut 作为 [Measures].[Bloc Début Intervalle], format_string = &

回答 1 投票 0

AmCharts5 在显示后改变节点的颜色

我正在使用 AmCharts5 JS 构建一个图表,将域名显示为 ForceDirected 树中的节点。显示域,异步函数检查它们的可用性,并尝试...

回答 1 投票 0

Amcharts 5 图表在 MUI 对话框中不起作用:无法找到带有 id 的 HTML 元素

我正在使用AmChart 5的XY图表来显示一些数据。单击按钮时,用户可以在 MUI 对话框中看到该图表并对其进行一些操作。但是,当我想在 MUI D 中显示我的图表时...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.