系列在将其推入 amCharts v4 中的 XYChartScrollbar 后变得不可见

Question

我想要一个带有类别轴的滚动条，该类别轴与其中一个图表的类别轴相同。我注意到当我推动轴时网格变得不可见。数据系列也会出现同样的问题。即：当注释下面一行时：

const scroll_series = scroller.scrollbarChart.series.push(series1);

示例如下：

window.onload = () => {
  // Create chart instance
  chart = am4core.create("chartdiv", am4charts.XYChart);

  chart.data = [
    {
      date: "2012-01-01",
      value: 8
    },
    {
      date: "2012-01-02",
      value: 10
    },
    {
      date: "2012-01-03",
      value: 12
    },
    {
      date: "2012-01-04",
      value: 14
    },
    {
      date: "2012-01-05",
      value: 11
    },
    {
      date: "2012-01-06",
      value: 6
    },
    {
      date: "2012-01-07",
      value: 7
    },
    {
      date: "2012-01-08",
      value: 9
    },
    {
      date: "2012-01-09",
      value: 13
    },
    {
      date: "2012-01-10",
      value: 15
    },
    {
      date: "2012-01-11",
      color: "#CC0000",
      value: 19
    },
    {
      date: "2012-01-12",
      value: 21
    },
    {
      date: "2012-01-13",
      value: 22
    },
    {
      date: "2012-01-14",
      value: 20
    },
    {
      date: "2012-01-15",
      value: 18
    },
    {
      date: "2012-01-16",
      value: 14
    },
    {
      date: "2012-01-17",
      value: 16
    },
    {
      date: "2012-01-18",
      value: 18
    },
    {
      date: "2012-01-19",
      value: 17
    },
    {
      date: "2012-01-20",
      value: 15
    },
    {
      date: "2012-01-21",
      value: 12
    },
    {
      date: "2012-01-22",
      value: 10
    },
    {
      date: "2012-01-23",
      value: 8
    }
  ];

  // Create axes
  const dateAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  dateAxis.dataFields.category = "date";
  dateAxis.renderer.grid.template.disabled = false;
  dateAxis.fontSize = 22;

  // Value Axis
  const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.grid.template.disabled = false;
  valueAxis.renderer.line.strokeOpacity = 0.3;
  valueAxis.renderer.line.strokeWidth = 2;
  valueAxis.renderer.line.stroke = am4core.color("rgba(255, 255, 255, 0.4)");

  // Create series
  const series1 = chart.series.push(new am4charts.LineSeries());
  series1.dataFields.valueY = "value";
  series1.dataFields.categoryX = "date";
  series1.strokeWidth = 4;
  series1.strokeOpacity = 1;

  // Scroller
  const scroller = new am4charts.XYChartScrollbar();
  chart.scrollbarX = scroller;
  const scroll_series = scroller.scrollbarChart.series.push(series1);
};

Answer 1

您不应将系列推入 XYChartScrollbar.scrollbarChart 对象，而应直接推入 XYChartScrollbar。然后，如果只想显示轴标签，可以将系列设置为不可见。

而不是行：

const scroll_series = scroller.scrollbarChart.series.push(series1);

你应该有：

const scroller_series = scroller.series.push(series1);
scroller.scrollbarChart.plotContainer.visible = false;

系列在将其推入 amCharts v4 中的 XYChartScrollbar 后变得不可见

Series gets invisible after pushing it into XYChartScrollbar in amCharts v4

javascript

amcharts

amcharts4