Как реализовать диаграмму с накоплением столбцов amchart с прокруткой

Question

Я реализовал следующую диаграмму с накоплением столбцов ниже:

Как видите, на некоторых столбцах не отображается название метки.

Я попытался увеличить ширину с этого графика, и теперь я могу видеть метку из столбцов (см. Новый шрифт ниже)

Автобус теперь не вижу всех предметов. Я думаю, что мне нужно добавить полосу прокрутки. Не могли бы вы мне помочь? В основном я хотел бы добавить прокрутку оси X на этом графике.

Примечание: Я использую amchart версии 4.

Я использую этот пример: https://www.amcharts.com/demos/stacked-column-chart/

следуйте моему коду ниже.

метод, используемый для построения диаграммы

private buildChart(dataChart) {

  /* Chart code */
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Create chart instance
  const chart = am4core.create('chartdiv', am4charts.XYChart);

  for (const data of dataChart) {
    chart.data.push(data);
  }

  console.log(chart);
  // Create axes
  const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = 'model';
  categoryAxis.renderer.grid.template.location = 0;

  const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.inside = true;
  valueAxis.renderer.labels.template.disabled = true;
  valueAxis.min = 0;

  // Create series
  function createSeries(field, name) {

    // Set up series
    const series = chart.series.push(new am4charts.ColumnSeries());
    series.name = name;
    series.dataFields.valueY = field;
    series.dataFields.categoryX = 'model';
    series.sequencedInterpolation = true;

    // Make it stacked
    series.stacked = true;

    // Configure columns
    series.columns.template.width = am4core.percent(60);
    series.columns.template.tooltipText = '[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}';

    // Add label
    const labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.text = '{valueY}';
    labelBullet.locationY = 0.5;

    return series;
  }

  createSeries('DISCONNECTED', 'DISCONNECTED');
  createSeries('AVAILABLE', 'AVAILABLE');

  // Legend
  chart.legend = new am4charts.Legend();

}

HTML-код

<div class="row">
  <div class="col-md-12 teste">
    <app-card [title]="'Available Devices'" >
      <div id="chartdiv" [style.height]="'400px'" [style.width]="'4000px'"></div>
    </app-card>
  </div>

Answer 1

Я нашел одно решение для этого. следуйте ниже:

// I use the scrollbarX to create a horizontal scrollbar 
chart.scrollbarX = new am4core.Scrollbar();

// here I set the scroolbar bottom the chart
chart.scrollbarX.parent = chart.bottomAxesContainer;

//here I chose not to show the startGrip (or button that expand the series from chart)
chart.scrollbarX.startGrip.hide();
chart.scrollbarX.endGrip.hide();

// here I set the start and end scroolbarX series that I would like show in chart initially
chart.scrollbarX.start = 0;
chart.scrollbarX.end = 0.25;

// here I chose not to show the zoomOutButton  that appear above from chart
chart.zoomOutButton = new am4core.ZoomOutButton();
chart.zoomOutButton.hide();

Итак, мой полный метод построения диаграммы:

private buildChart(dataChart) {

  /* Chart code */
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Create chart instance
  const chart = am4core.create('chartdiv', am4charts.XYChart);

  for (const data of dataChart) {
    chart.data.push(data);
  }

  // Create axes
  const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = 'model';
  categoryAxis.renderer.grid.template.location = 0;

  const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.inside = true;
  valueAxis.renderer.labels.template.disabled = true;
  valueAxis.min = 0;

  // Create series
  function createSeries(field, name) {

    // Set up series
    const series = chart.series.push(new am4charts.ColumnSeries());
    series.name = name;
    series.dataFields.valueY = field;
    series.dataFields.categoryX = 'model';
    series.sequencedInterpolation = true;

    // Make it stacked
    series.stacked = true;

    // Configure columns
    series.columns.template.width = am4core.percent(60);
    series.columns.template.tooltipText = '[bold]{name}[/]\n[font-size:15px]{categoryX}: {valueY}';

    // Add label
    const labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.text = '{valueY}';
    labelBullet.locationY = 0.5;

    return series;
  }

  createSeries('DISCONNECTED', 'DISCONNECTED');
  createSeries('AVAILABLE', 'AVAILABLE');

  // Legend
  chart.legend = new am4charts.Legend();
  chart.scrollbarX = new am4core.Scrollbar();
  chart.scrollbarX.parent = chart.bottomAxesContainer;
  chart.scrollbarX.startGrip.hide();
  chart.scrollbarX.endGrip.hide();
  chart.scrollbarX.start = 0;
  chart.scrollbarX.end = 0.25;

  chart.zoomOutButton = new am4core.ZoomOutButton();
  chart.zoomOutButton.hide();

}

Следуйте распечатке ниже, показывая, как это получилось