堆棧內存溢出
  簡體   English   中英

Amcharts5：多線圖表中的圖例錯誤

[英]Amcharts5: legend errors in multiline chart

 原文  2022-11-26 08:39:43  8   1    javascript/ visualization/ amcharts/ amcharts5

問題描述

我正在使用 amchart5 來呈現一些多行數據，但我對數據的呈現方式有一些疑問。

  1. 我無法將貨幣符號添加到 y 軸的標簽
  2. 我無法轉動 x 軸的標簽，因此它們更垂直而不是水平
  3. 預覽不會顯示任何線條

我該如何解決這個問題？

見圖片： 在此處輸入圖像描述

Javascript

<script type="text/javascript">
    am5.ready(function() {

    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("fundChartLine");
    
    root.numberFormatter.setAll({
        numberFormat: "#,###.##00",
    });

    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
        am5themes_Animated.new(root),
        am5themes_Responsive.new(root),
        Amdg.new(root)
    ]);
    // Create chart
    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
    var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: "zoomX",
        pinchZoomX:true
        }));
    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
    var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
    behavior: "none"
    }));
    cursor.lineY.set("visible", false);



    // Define data
    var data = {{ line_chart_data| safe }}
    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    // Create Y-axis
    let yAxis = chart.yAxes.push(
    am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
    })
    );

    // Create X-Axis
    /*var xAxis = chart.xAxes.push(
    am5xy.CategoryAxis.new(root, {
        maxDeviation: 0.2,
        renderer: am5xy.AxisRendererX.new(root, {}),
        categoryField: "chart_dates"
    })
    );
    xAxis.data.setAll(data);*/

    var xAxis = chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            groupData: true,
            baseInterval: { timeUnit: "day", count: 1 },
            renderer: am5xy.AxisRendererX.new(root, {
            minGridDistance: 30
            })
        })
        );

    xAxis.get("dateFormats")["day"] = "MM/dd";
    xAxis.get("periodChangeDateFormats")["day"] = "MMMM";
    
    xAxis.data.setAll(data);
    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/
    function createSeries(name, field) {
    var series = chart.series.push( 
        am5xy.LineSeries.new(root, { 
        name: name,
        xAxis: xAxis, 
        yAxis: yAxis, 
        valueYField: field, 
        categoryXField: "chart_dated_dt",
        stacked: false
        //legendLabelText: "[{fill}]{category}[/]",
        //legendValueYText: "[bold {fill}]ZAR{valueY}[/]"

        })
    );
    
    series.strokes.template.setAll({
        strokeWidth: 2,
        //strokeDasharray: [2,1]
    });
    series.fills.template.setAll({
        fillOpacity: 0.5,
        visible: false
    });
    series.data.setAll(data);
    
    //series.labels.template.set("visible", false);
    //series.ticks.template.set("visible", false);
    
    console.log(series)        
}

    
    chart.topAxesContainer.children.push(am5.Label.new(root, {
        text: "Performance",
        fontSize: 30,
        fontColor: '#e40505',
        fontWeight: "500",
        textAlign: "center",
        x: am5.percent(50),
        centerX: am5.percent(50),
        paddingTop: 0,
        paddingBottom: 20,
    }));



    createSeries("Average Contributions", "average_contrib");
    createSeries("Average Contributions + Interest", "average_totals");
    createSeries("Median Contributions", "median_contrib");
    createSeries("Median Contributions + Interest", "median_totals");
    createSeries("Your Contributions", "user_contrib");
    createSeries("Your Contributions + Interest", "user_totals");

    
    //var legend = chart.children.push(am5.Legend.new(root, {}));
    //legend.data.setAll(chart.series.values);
    var legend = chart.bottomAxesContainer.children.push(am5.Legend.new(root, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        useDefaultMarker: true,
        paddingTop: 10,
        paddingBottom: 20,
        layout: am5.GridLayout.new(root, {
            maxColumns: 3,
            fixedWidthGrid: true
        })
    }));
    legend.data.setAll(chart.series.values);

    // Add scrollbar
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/

    /*var scrollbarX = am5.Scrollbar.new(root, {
        orientation: "horizontal"
        });*/

    var scrollbarX = am5xy.XYChartScrollbar.new(root, {
        orientation: "horizontal",
        height: 50
        });
    
    //chart.bottomAxesContainer.children.push(scrollbarX);
    /*let sbxAxis = scrollbarX.chart.xAxes.push(
        am5xy.CategoryAxis.new(root, {
        maxDeviation: 0.2,
        renderer: am5xy.AxisRendererX.new(root, {
            opposite: false,
            strokeOpacity: 0
        }),
        categoryField: "chart_dates"
        })
    );*/
    
    let sbxAxis = scrollbarX.chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            groupData: true,
            groupIntervals: [{ timeUnit: "year", count: 1 }],
            baseInterval: { timeUnit: "day", count: 1 },
            renderer: am5xy.AxisRendererX.new(root, {
                opposite: false,
                strokeOpacity: 0
            })
        })
        );

    let sbyAxis = scrollbarX.chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            renderer: am5xy.AxisRendererY.new(root, {})
        })
    );

    let sbseries = scrollbarX.chart.series.push(
        am5xy.LineSeries.new(root, {
            xAxis: sbxAxis,
            yAxis: sbyAxis,
            valueYField: "user_totals", 
            valueXField: "chart_dated_dt",
        })
        );
    sbseries.strokes.template.setAll({
        strokeWidth: 2,
        //strokeDasharray: [2,1]
    });
    sbseries.data.setAll(data);
    chart.set("scrollbarX", scrollbarX);
    console.log(sbseries.data.values[0]["user_totals"])
    console.log(sbseries.data.values[0]["chart_dated_dt"])




    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/
    root._logo.dispose();
    chart.appear(1000, 100);
    }); // end am5.ready()
我已經查看了文檔和此處的一些問題，但仍然卡住了-

1 個解決方案

解決方案1
 1 已采納  2022-12-02 23:31:40

  1. 對於貨幣，我在數字格式化程序中添加了貨幣符號：

    root.numberFormatter.setAll({ numberFormat: "'ZAR'#,###.##00", tooltipNumberFormat: "'ZAR'#,###.##00",

  2. 我沒有弄清楚如何處理圖例的格式，但我所做的是將日期數據從帶有字符串的類別值更改為實際值，這允許我將軸更改為日期軸。 Amcharts 自然地以我的問題消失的方式處理它的格式，它也符合我對圖表的長期數據目標。 該類別是一個故事差距。

  3. 預覽與我的日期編譯有問題。 我在轉換日期時注意到代碼中我只是將日期設置為 object 但實際上並沒有得到時間。 通過使用 get_time，我能夠正確渲染 x 軸。 這個問題也影響了數字 2。

    對於 (let i = 0; i < data.length; i++) { data[i]["chart_dated_dt"] = new Date(data[i]["chart_dated_dt"]).getTime(); }

完整代碼：

<script type="text/javascript">
    am5.ready(function() {

        // Create root element
        // https://www.amcharts.com/docs/v5/getting-started/#Root_element
        var root = am5.Root.new("fundChartLine");
        
        root.numberFormatter.setAll({
            numberFormat: "'ZAR '#,###.##00",
            tooltipNumberFormat: "'ZAR '#,###.##00",
        });

        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
            am5themes_Animated.new(root),
            am5themes_Responsive.new(root),
            Amdg.new(root)
        ]);
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart = root.container.children.push(am5xy.XYChart.new(root, {
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX",
            pinchZoomX:true
            }));
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
        behavior: "none"
        }));
        cursor.lineY.set("visible", false);



        // Define data
        var data = {{ line_chart_data| safe }}
        
        for (let i = 0; i < data.length; i++) {
            data[i]["chart_dated_dt"] = new Date(data[i]["chart_dated_dt"]).getTime();
        }

        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        // Create Y-axis
        let yAxis = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            maxDeviation: 0.1,
            renderer: am5xy.AxisRendererY.new(root, {})
        })
        );


        var xAxis = chart.xAxes.push(
            am5xy.DateAxis.new(root, {
                maxDeviation: 0.1,
                groupData: true,
                groupIntervals: [
                    { timeUnit: "month", count: 1 }
                    ],
                baseInterval: { timeUnit: "day", count: 1 },
                renderer: am5xy.AxisRendererX.new(root, {
                }),
                tooltip: am5.Tooltip.new(root, {})
            })
            );

        xAxis.get("dateFormats")["day"] = "MM/dd";
        xAxis.get("periodChangeDateFormats")["day"] = "MMMM";
        
        xAxis.data.setAll(data);
        // Add series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/
        function createSeries(name, field) {
        var series = chart.series.push( 
            am5xy.LineSeries.new(root, { 
            name: name,
            xAxis: xAxis, 
            yAxis: yAxis,
            valueYField: field, 
            valueXField: "chart_dated_dt",
            stacked: false,
            tooltip: am5.Tooltip.new(root, {
                pointerOrientation: "horizontal",
                labelText: "{valueY}",
                })

            })
        );
        
        series.strokes.template.setAll({
            strokeWidth: 2,
            //strokeDasharray: [2,1]
        });
        series.fills.template.setAll({
            fillOpacity: 0.5,
            visible: false
        });
        series.data.setAll(data);

        }
        
        chart.topAxesContainer.children.push(am5.Label.new(root, {
            text: "Performance",
            fontSize: 30,
            fontColor: '#e40505',
            fontWeight: "500",
            textAlign: "center",
            x: am5.percent(50),
            centerX: am5.percent(50),
            paddingTop: 0,
            paddingBottom: 20,
        }));

        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
            xAxis: xAxis
            }));
        cursor.lineY.set("visible", false);


        createSeries("Average Contributions", "average_contrib");
        createSeries("Average Contributions + Interest", "average_totals");
        createSeries("Median Contributions", "median_contrib");
        createSeries("Median Contributions + Interest", "median_totals");
        createSeries("Your Contributions", "user_contrib");
        createSeries("Your Contributions + Interest", "user_totals");

        var legend = chart.bottomAxesContainer.children.push(am5.Legend.new(root, {
            centerX: am5.percent(50),
            x: am5.percent(50),
            useDefaultMarker: true,
            paddingTop: 10,
            paddingBottom: 20,
            layout: am5.GridLayout.new(root, {
                maxColumns: 3,
                fixedWidthGrid: true
            })
        }));
        legend.data.setAll(chart.series.values);

        // Add scrollbar
        // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/

        var scrollbarX = am5xy.XYChartScrollbar.new(root, {
            orientation: "horizontal",
            height: 50
            });
        
        let sbxAxis = scrollbarX.chart.xAxes.push(
            am5xy.DateAxis.new(root, {
                groupData: true,
                groupIntervals: [
                    { timeUnit: "month", count: 1 }
                    ],
                baseInterval: { timeUnit: "day", count: 1 },
                renderer: am5xy.AxisRendererX.new(root, {
                    opposite: false,
                    strokeOpacity: 0
                })
            })
            );

        let sbyAxis = scrollbarX.chart.yAxes.push(
            am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {})
            })
        );

        let sbseries = scrollbarX.chart.series.push(
            am5xy.LineSeries.new(root, {
                xAxis: sbxAxis,
                yAxis: sbyAxis,
                valueYField: "user_totals", 
                valueXField: "chart_dated_dt",
            })
            );
        sbseries.strokes.template.setAll({
            strokeWidth: 2,
            //strokeDasharray: [2,1]
        });
        sbseries.data.setAll(data);
        chart.set("scrollbarX", scrollbarX);


        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        
        sbseries.appear(1000, 100);
        console.log(chart.series)
        console
        root._logo.dispose();
        chart.appear(1000, 100);
        }); // end am5.ready()
</script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 柱形圖中圖例中的 AmCharts5 值 Amcharts5 圖例垂直對齊不起作用 amCharts5 - 如何在甘特圖上隱藏 X 軸標簽？ Dojo圖表上的多行圖例 自定義amCharts股票圖表圖例 MapPointSeries 不在 amcharts5 中調用 heatRules？ 如何在 Amcharts5 折線圖中刪除默認軸並創建新的自定義軸？ 如何用amCharts5制作鏡像條形圖XY柱形系列堆疊系列 如何在amCharts柱形圖中添加圖例？ AmCharts Legend
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM