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

问题描述 投票：0回答：1

我有这个用 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 amcharts5
1个回答
0
投票

根据提供的代码，实现更改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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.