Question

使用时间序列数据时，图例标签不在DOM中。我大约有1500个数据点。将其减少到3，因为似乎数据点的数量不是问题的原因。

这是错误还是我配置错误？

我还尝试为图例使用一个单独的div（如here所述，但这似乎没有效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AmCharts</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <style>
        html, body {
            font-size: 16px;
        }

        #chartdiv,
        #legenddiv {
            width: 100%;
            height: 500px;
            border: 1px dotted #c99;
            margin: 1em 0;
        }

        #legenddiv {
            height: 150px;
        }
    </style>
</head>

<body>
    <div id="chartdiv"></div>

    Legend:
    <div id="legenddiv"></div>
    <script src="./main.js"></script>
</body>

</html>

am4core.ready(function () {
    am4core.useTheme(am4themes_animated); // theming

    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.data = [{
            "date": 1574861644000,
            "value": 13505
        },
        {
            "date": 1574861645000,
            "value": 13505
        },
        {
            "date": 1574861645000,
            "value": 13492
    }];

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.baseInterval = { timeUnit: "second", count: 1 };
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "value";
    series.dataFields.dateX = "date";
    series.tooltipText = "{value}";
    series.tooltip.pointerOrientation = "vertical";

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.snapToSeries = series;
    chart.cursor.xAxis = dateAxis;

    // create a legend for the sensors
    chart.legend = new am4charts.Legend();
    let legendContainer = am4core.create("legenddiv", am4core.Container);
    legendContainer.width = am4core.percent(100);
    legendContainer.height = am4core.percent(100);
    chart.legend.parent = legendContainer;
}); // end am4core.ready()

Answer 1

默认情况下，图例将查看系列的ModelCheckpoint属性，以用作here中所述的图例标签。将其添加到您的系列中可以解决此问题，例如modelcheckpoint = tf.keras.callbacks.ModelCheckpoint(model_name + f"_{val_loss:.3f}.h5", save_best_only=True, verbose=1)

amcharts图例标签丢失

1 个答案: