如何使用Am4charts连接单个图表上的图形数据？

Question

下面的图像是我试图开发的图像。按响应中存在的类型键分隔图表，并且如果具有相同日期的数据的多个支付周期仍然单独显示它们。每个支付周期应由垂直线分隔。 因此，我面临的问题是我无法在一张图中将薪资周期一个接一个地连接起来。 下面的代码是我使用react.js和am4charts编写的，但无法找出解决方案。ColumnSeries是根据过滤器为每个payCycle创建的。

const GraphComponentContainer = ({ history, filters }) => {                                  const [message] = useState(null);                                                             useEffect(() => {recentTrendGraph(ExpandedRowGraphData, filters);}, [filters]);                 const recentTrendGraph = (graphData, filter) => {                            console.log(filter);                                                                      const chart = am4core.create(recent_trend, am4charts.XYChart);                                            const testData = Object.keys(graphData)
  .filter(paycycle => filter.includes(paycycle))
  .flatMap(payCycle => graphData[payCycle]);

chart.data = testData;
// chart.data = filter.map(paycycles => ExpandedRowGraphData[paycycles]);

const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "date";
categoryAxis.title.text = "Pay Dates";
categoryAxis.title.fill = am4core.color("#707070");
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.grid.template.strokeWidth = 0;
categoryAxis.renderer.cellStartLocation = 0.3;
categoryAxis.renderer.cellEndLocation = 0.7;
categoryAxis.renderer.minGridDistance = 30;

const label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.fontSize = 12;
label.fontWeight = 300;
label.color = "#707070";
label.marginTop = -60;
label.rotation = -45;

label.adapter.add("date", text => {
  return moment(text, "YYYY-MM-DD").format("MMM DD YYYY");
});

// eslint-disable-next-line func-names
categoryAxis.events.on("sizechanged", function(ev) {
  const axis = ev.target;
  const cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
  axis.renderer.labels.template.maxWidth = cellWidth;
  axis.renderer.labels.template.maxHeight = 100;
});

const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Accuracy in %";
valueAxis.title.fill = am4core.color("#707070");
valueAxis.renderer.grid.template.strokeWidth = 0;
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.stroke = am4core.color("#eee");
valueAxis.min = -5;
valueAxis.max = 110;

valueAxis.renderer.labels.template.adapter.add("text", (text, target) => {
  if (
    (target.dataItem && target.dataItem.value < 0) ||
    (target.dataItem && target.dataItem.value > 100)
  ) {
    return "";
  }
  return text;
});

const numberFormatter = new am4core.NumberFormatter();
numberFormatter.numberFormat = "#.a%";
valueAxis.numberFormatter = numberFormatter;

const yAxisLabel = valueAxis.renderer.labels.template;
yAxisLabel.fontSize = 12;
yAxisLabel.fontWeight = 300;
yAxisLabel.color = "#707070";
yAxisLabel.marginTop = -20;

valueAxis.renderer.grid.template.strokeOpacity = 0.5;
valueAxis.renderer.grid.template.stroke = am4core.color("#4f5460");

const seriesMap = {};


filter.forEach(payCycle => {
  const series = chart.series.push(new am4charts.ColumnSeries());
  series.name = `${payCycle} Pay Dates`;
  series.dataFields.valueY = "value";
  series.dataFields.categoryX = "date";
  series.columns.template.fill = am4core.color("#144182");
  series.strokeWidth = 3;
  series.columns.template.width = am4core.percent(60);
  series.columns.template.tooltipText = `[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}`;
  series.columns.template.maxHeight = 40;
  series.columns.template.maxWidth = 40;

  series.tooltip.pointerOrientation = "vertical";
  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#fff");
  series.tooltip.label.fill = am4core.color("#00");
  series.columns.template.tooltipHTML = `
  <div style="display: grid; grid-template-columns: max-content 1fr; gap: 8px; background-color: #FFFFFF; padding: 8px;">
    <div style="grid-column: span 2; background-color: #F8F8F8;">
      <span style="font-size: 14px; background-color: #F8F8F8; padding: 2px; font-weight: bold;">Oct 15, 2023</span><br/>
    </div>
    <div style="grid-column: span 2; background-color: #FFFFFF;">
      <span style="font-size: 12px;">Total employees paid </span>
      <span style="font-weight: bold;">70</span>
    </div>
    <div style="grid-column: span 2; background-color: #FFFFFF;">
      <span style="font-size: 12px;">No. of correct payments made per employee</span>
      <span style="font-weight: bold;">80</span>
    </div>
    <div style="grid-column: span 2; background-color: #FFFFFF;">
      <span style="font-size: 12px;">Payroll Accuracy Rate </span>
      <span style="font-weight: bold;">90</span>
    </div>
  </div>
`;

  // Filter data based on payCycle and type
  const filteredData = graphData[payCycle].filter(
    item => item.type === payCycle
  );

  // Set data for each series
  series.data = filteredData;

  const columnTemplate = series.columns.template;
  columnTemplate.column.cornerRadius(5, 5, 5, 5);
  columnTemplate.strokeOpacity = 0;

  seriesMap[payCycle] = series;
});

  const ExpandedRowGraphData = {     weekly: [       {         date: "2023-11-08",         type: "weekly",         key: "1",         value: 90,         color: "#144182"       },       {         date: "2023-11-15",         type: "weekly",         key: "2",         value: 96,         color: "#144182"       },       {         date: "2023-11-22",         type: "weekly",         key: "3",         value: 95,         color: "#144182"       },       {         date: "2023-11-29",         type: "weekly",         key: "4",         value: 95,         color: "#144182"       }     ],     biWeekly: [       {         date: "2023-11-15",         type: "biWeekly",         key: "1",         value: 93,         color: "#144182"       },       {         date: "2023-11-29",         type: "biWeekly",         key: "2",         value: 91,         color: "#144182"       },       {         date: "2023-11-01",         type: "biWeekly",         key: "3",         value: 90,         color: "#144182"       }     ],     semiMonthly: [       {         date: "2023-11-15",         type: "semiMonthly",         key: "1",         value: 86,         color: "#144182"       },       {         date: "2023-11-29",         type: "semiMonthly",         key: "2",         value: 88,         color: "#144182"       }     ],     monthly: [       {         date: "2023-11-30",         type: "monthly",         key: "1",         value: 81,         color: "#144182"       }     ]   };                                                                                                                                                                                

Answer 1

使用下面的示例选项我的问题得到了解决

https://www.amcharts.com/demos-v4/grouped-and-sorted-columns-v4/