Add/Show AmChart 蜡烛图上以 1 分钟为间隔的日期时间

Question

我有一个烛台图表，需要以 1 分钟的间隔显示柱状图。但是，AmChart 演示的默认设置是每天。我如何以 1 分钟的间隔显示 xAxis，这样每个烛台就不会像这里显示的那样重叠 faulty chart？

代码示例在此处：

      let chart = am4core.create("chartdiv", am4charts.XYChart);
      chart.padding(0, 15, 0, 15);

      // Load data

      var chartData = [{"date":"20200505  15:53:00","open":1.089435,"high":1.08967,"low":1.08941,"close":1.08967,"volume":-1},
{"date":"20200505  15:54:00","open":1.08967,"high":1.089845,"low":1.089625,"close":1.08971,"volume":-1},
{"date":"20200505  15:55:00","open":1.08971,"high":1.089755,"low":1.089565,"close":1.089575,"volume":-1},
{"date":"20200505  15:56:00","open":1.089575,"high":1.08958,"low":1.089405,"close":1.08952,"volume":-1},
{"date":"20200505  15:57:00","open":1.08952,"high":1.08952,"low":1.089365,"close":1.089495,"volume":-1},
{"date":"20200505  15:58:00","open":1.089495,"high":1.08957,"low":1.08946,"close":1.089495,"volume":-1},
{"date":"20200505  15:59:00","open":1.089495,"high":1.090075,"low":1.089495,"close":1.089875,"volume":-1}];

      chart.data = chartData;
      //chart.dataDateFormat = "yyyyMMdd  HH:mm:ss";
      //chart.categoryField = "date";

      // the following line makes value axes to be arranged vertically.
      chart.leftAxesContainer.layout = "vertical";

      let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.renderer.grid.template.location = 0;
      dateAxis.renderer.ticks.template.length = 8;
      dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
      dateAxis.renderer.grid.template.disabled = true;
      dateAxis.renderer.ticks.template.disabled = false;
      dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
      dateAxis.renderer.minLabelPosition = 0.01;
      dateAxis.renderer.maxLabelPosition = 0.99;
      dateAxis.keepSelection = true;
      dateAxis.minHeight = 30;

      dateAxis.groupData = true;
      dateAxis.minZoomCount = 5;

      //dateAxis.dateFormats.setKey("minute", "HH:mm");

      // these two lines makes the axis to be initially zoomed-in
      // dateAxis.start = 0.7;
      // dateAxis.keepSelection = true;

      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.tooltip.disabled = true;
      valueAxis.zIndex = 1;
      valueAxis.renderer.baseGrid.disabled = true;
      // height of axis
      valueAxis.height = am4core.percent(65);

      valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");
      valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
      valueAxis.renderer.inside = true;
      valueAxis.renderer.labels.template.verticalCenter = "bottom";
      valueAxis.renderer.labels.template.padding(2, 2, 2, 2);

      //valueAxis.renderer.maxLabelPosition = 0.95;
      valueAxis.renderer.fontSize = "0.8em"

      let series = chart.series.push(new am4charts.CandlestickSeries());
      series.dataFields.dateX = "date";
      series.dataFields.openValueY = "open";
      series.dataFields.valueY = "close";
      series.dataFields.lowValueY = "low";
      series.dataFields.highValueY = "high";
      series.clustered = false;
      series.tooltipText = "open: {openValueY.value}\nlow: {lowValueY.value}\nhigh: {highValueY.value}\nclose: {valueY.value}";
      series.name = "Hang Seng Index Future";
      series.defaultState.transitionDuration = 0;

      let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis2.tooltip.disabled = true;
      // height of axis
      valueAxis2.height = am4core.percent(35);
      valueAxis2.zIndex = 3
      // this makes gap between panels
      valueAxis2.marginTop = 30;
      valueAxis2.renderer.baseGrid.disabled = true;
      valueAxis2.renderer.inside = true;
      valueAxis2.renderer.labels.template.verticalCenter = "bottom";
      valueAxis2.renderer.labels.template.padding(2, 2, 2, 2);
      //valueAxis.renderer.maxLabelPosition = 0.95;
      valueAxis2.renderer.fontSize = "0.8em"

      valueAxis2.renderer.gridContainer.background.fill = am4core.color("#000000");
      valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;

      let series2 = chart.series.push(new am4charts.ColumnSeries());
      series2.dataFields.dateX = "date";
      series2.clustered = false;
      series2.dataFields.valueY = "volume";
      series2.yAxis = valueAxis2;
      series2.tooltipText = "{valueY.value}";
      series2.name = "Volume Traded";
      // volume should be summed
      series2.groupFields.valueY = "sum";
      series2.defaultState.transitionDuration = 0;

      chart.cursor = new am4charts.XYCursor();

      let scrollbarX = new am4charts.XYChartScrollbar();

      let sbSeries = chart.series.push(new am4charts.LineSeries());
      sbSeries.dataFields.valueY = "close";
      sbSeries.dataFields.dateX = "date";
      scrollbarX.series.push(sbSeries);
      sbSeries.disabled = true;
      scrollbarX.marginBottom = 20;
      chart.scrollbarX = scrollbarX;
      scrollbarX.scrollbarChart.xAxes.getIndex(0).minHeight = undefined;

Answer 1

您需要在 inputDateFormat property of the dateFormatter object 中指定字符串日期格式（dataDateFormat 是 v3 属性，而不是 v4）。

chart.dateFormatter.inputDateFormat = "yyyyMMdd  HH:mm:ss"

Add/Show AmChart 蜡烛图上以 1 分钟为间隔的日期时间

Add/Show datetime at 1 minute interval on AmChart candlestick chart

amcharts

typescript

angular

amcharts4