日期为X，时间为Y的Javascript图表

我正在搜索不同的js库来制作一个图表（charts.js和amCharts），但我无法让它工作

我需要一个非常简单的图表，其中日期为X轴，时间为Y，表示“失败”和“成功”登录

例如：

21:00  |                                              S
20:00  |    S              S
19:00  |                                S             F
18:00  |                   F            F             F
17:00  |                                              F
16:00  |                   S
15:00  |    F
-------------------------------------------------------------------------------
          2020-04-26   2020-04-27   2020-04-28   2020-04-29

S:成功登录 F:登录失败

我在这个示例中尝试了Charts.js，但不起作用：

使用amCharts：

am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chart_user_stats", am4charts.XYChart);

    // Add data
    chart.data = [{
        "date": "2012-07-27",
        "time": "18:30:33",
    }, {
        "date": "2012-07-28",
        "time": "11:55:59",
    }];

    // Set input format for the dates
    chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "time";
    series.dataFields.dateX = "date";
    series.tooltipText = "{time}"
    series.strokeWidth = 2;
    series.minBulletDistance = 15;

    // Drop-shaped tooltips
    series.tooltip.background.cornerRadius = 20;
    series.tooltip.background.strokeOpacity = 0;
    series.tooltip.pointerOrientation = "vertical";
    series.tooltip.label.minWidth = 40;
    series.tooltip.label.minHeight = 40;
    series.tooltip.label.textAlign = "middle";
    series.tooltip.label.textValign = "middle";

    // Make bullets grow on hover
    var bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.circle.strokeWidth = 2;
    bullet.circle.radius = 4;
    bullet.circle.fill = am4core.color("#fff");

    var bullethover = bullet.states.create("hover");
    bullethover.properties.scale = 1.3;

    // Make a panning cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.behavior = "panXY";
    chart.cursor.xAxis = dateAxis;
    chart.cursor.snapToSeries = series;

    // Create vertical scrollbar and place it before the value axis
    chart.scrollbarY = new am4core.Scrollbar();
    chart.scrollbarY.parent = chart.leftAxesContainer;
    chart.scrollbarY.toBack();

    // Create a horizontal scrollbar with previe and place it underneath the date axis
    chart.scrollbarX = new am4charts.XYChartScrollbar();
    chart.scrollbarX.series.push(series);
    chart.scrollbarX.parent = chart.bottomAxesContainer;

    dateAxis.keepSelection = true;


});

---

问候

而不是询问哪个库可以绘制日期+时间序列图（因为它们都可以），请改写您的问题，以显示您在ChartJS和/或amCharts中使用了哪些代码，以及这些库存在哪些问题。我编辑并添加了一个charts.js示例。没有人可以帮助我？而不是询问哪个库可以绘制日期+时间序列图（因为它们都可以），请改写您的问题，以显示您在ChartJS和/或amCharts中使用了哪些代码，以及这些库存在哪些问题。我编辑并添加了一个charts.js示例。没有人能帮我吗？