amcharts 相关问题

我有这个用 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>  <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>   <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>  </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>  <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>   <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>  </body> </html>

amcharts amcharts5

回答 1 投票 0

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

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

amcharts amcharts5

回答 1 投票 0

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

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

amcharts amcharts5

回答 1 投票 0

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

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