charts - 使用 amChart 系列

Question

我们已经创建了这样的东西，现在我不想在我的图表中添加一些周期 codepen 。但我写的代码不起作用。谢谢

    am4core.useTheme(am4themes_animated);
      let items = [
        {
          "X": 1,
          "Y": 2,
          "code": "ExecDate",
          "date": "May 06, 2010",
          "enabled": true,
          "name": "Execution Date",
          "refTxt": null,
          "refX": null
        },
        {
          "X": 1,
          "Y": -1,
          "code": "EffDate",
          "date": "May 07, 2010",
          "enabled": true,
          "name": "Effective Date",
          "refTxt": null,
          "refX": null
        },
      ....
      ];

      let periods = [
        {
          "Xend": "May 08, 2010",
          "Xstart": "May 07, 2010",
          "Y": 1,
          "code": "PunchPeriod",
          "name": "Punch List Completion Period"
        },
        ...
      ];

请帮助我

Answer 1

我已经写了正确的代码

      am4core.useTheme(am4themes_animated);
      let items = [
        {
          "X": 1,
          "Y": 2,
          "code": "ExecDate",
          "date": "May 06, 2010",
          "enabled": true,
          "name": "Execution Date",
          "refTxt": null,
          "refX": null
        },
        {
          "X": 1,
          "Y": -1,
          "code": "EffDate",
          "date": "May 07, 2010",
          "enabled": true,
          "name": "Effective Date",
          "refTxt": null,
          "refX": null
        },
      ];
      let chart = am4core.create("chart-am", am4charts.XYChart);
      chart.data = items;
      chart.dateFormatter.inputDateFormat = "MMM d, yyyy";
      chart.maskBullets = false;
      chart.paddingRight = 30;

// Create axes

      let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.dateFormatter.dateFormat = "MMM d, yyyy";
      dateAxis.renderer.tooltipLocation = 0;

      dateAxis.extraMin = 0.1;
      dateAxis.extraMax = 0.1;


      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.title.text = "Transaction Volume";
      valueAxis.renderer.baseGrid.disabled = true;
      valueAxis.renderer.grid.template.strokeOpacity = 0.07;

// Create series
      let series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueY = "Y";
      series.dataFields.dateX = "date";
      series.tooltip.pointerOrientation = "vertical";
      series.columns.template.fill = am4core.color("#000")

      // green label
      let label = series.columns.template.createChild(am4core.Label);
      label.text = "{name}";
      label.align = "left";
      label.valign = "top";
      label.zIndex = 2;
      label.fill = am4core.color("#000");
      label.background.fill = am4core.color("green");
      label.background.opacity = 0.6
      label.strokeWidth = 0;
      label.width = 100
      label.height = 70
      label.wrap = true
      label.textValign = 'middle'
      //label.textAlign = 'center'
      label.fontSize = 11
      label.bbox.y = -100


      let columnTemplate = series.columns.template;

      columnTemplate.layout = "horizontal";
      columnTemplate.width = 3;

      columnTemplate.column.tooltipText = "Series: {name}\nDate: {categoryX}\nCount: {valueY}";
      columnTemplate.column.tooltipY = 0;
      columnTemplate.column.cornerRadiusTopLeft = 0;
      columnTemplate.column.cornerRadiusTopRight = 0;
      columnTemplate.strokeOpacity = 0;
      columnTemplate.adapter.add("fill", (fill, target) => {
        let color = chart.colors.getIndex(target.dataItem.index * 3);
        return color;
      });

      let periods = [
        {
          "Xstart": "May 07, 2010",
          "Xend": "May 08, 2010",
          "openY": -1.5,
          "Y": -2,
          "code": "PunchPeriod",
          "name": "Punch List Completion Period"
        },
        {
          "Xstart": "May 10, 2010", // was may 12
          "Xend": "May 12, 2010", // was may 10
          "openY": -2.5,
          "Y": -3,
          "code": "TitlePeriod",
          "name": "Title Transfer Period"
        },
        {
          "Xstart": "May 13, 2010", // was may 18
          "Xend": "May 18, 2010", // was may 13
          "openY": -3.5,
          "Y": -4,
          "code": "ConstPeriod",
          "name": "Construction Period"
        }
      ];

      let periodSeries = chart.series.push(new am4charts.ColumnSeries());
      periodSeries.data = periods;
      periodSeries.dataFields.openValueY = "openY";
      periodSeries.dataFields.valueY = "Y";
      periodSeries.dataFields.openDateX = "Xstart";
      periodSeries.dataFields.dateX = "Xend";
      periodSeries.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
      periodSeries.columns.template.propertyFields.fill = "color";
      periodSeries.columns.template.propertyFields.stroke = "color";
      periodSeries.columns.template.strokeOpacity = 1;

      let periodLabel = periodSeries.columns.template.createChild(am4core.Label);
      periodLabel.text = "{name}";
      periodLabel.align = "center";
      periodLabel.color = "color";
      label.align = "center";
      periodLabel.valign = "top";
      periodLabel.zIndex = 500;
      periodLabel.fill = am4core.color("#000");
      periodLabel.background.fill = am4core.color("red");
      periodLabel.background.opacity = 0.6
      periodLabel.strokeWidth = 0;
      periodLabel.width = 100
      periodLabel.height = 70
      periodLabel.wrap = true
      periodLabel.textValign = 'middle'
      periodLabel.textAlign = 'center'
      periodLabel.fontSize = 11
      periodLabel.bbox.y = -100
      chart.scrollbarX = new am4core.Scrollbar();