第一个和最后一个类别标签在 AmCharts XY 图表中消失

如何解决第一个和最后一个类别标签在 AmCharts XY 图表中消失

我正在使用 amcharts.js 制作 XY 图表，试图显示对许多陈述的响应频率。陈述在 Y 类别轴上，响应作为 X 轴上的项目符号。

我在这里有一个工作演示：https://codepen.io/david-green/pen/VwKbORM

最多可显示 5 个类别，显示所有类别。然而，如果我超过 5 个类别，首先初始类别消失，然后最后一个类别消失。在 16 个类别中，顶部和底部 2 个消失了。对于直播项目所需的 27 个类别的完整补充，前 3 个和后 3 个类别消失。

这可能是什么原因造成的？ 是否有更好的方法来构建数据以更有效地呈现？目前，渲染速度很慢。

am4core.ready(function() {
  
//========================================
//SETUP  

var amchartsConfig = {
    "questionsBackgroundColour" : "#eee","questionsWrapLength" : 400,"cellSize" : 17,"transition": 1000,};
var minBulletSize = 3;
var maxBulletSize = 20;
var bulletValueLabelOffset = 5;
var bulletRespondents = {
  "bulletType": "respondents","tooltipLabel": "Respondents","strokeWidth": 1,"strokeColour": "#000000","strokeOpacity": 1,"fillColour": "#cccccc","fillOpacity": 1,"labelColour": "#999999"
};
var bulletMeanscore = {
  "bulletType": "mean","tooltipLabel": "Mean score","strokeWidth": 4,"strokeColour": "#ff0000","fillColour": "#ffffff","fillOpacity": 0.2,"labelColour": "#ff0000"
};
// Define a custom theme
function am4themes_courseProfiles(target) {
  if (target instanceof am4charts.CategoryAxis) {
    target.background.fill = am4core.color(amchartsConfig.questionsBackgroundColour);
  }
  if (target instanceof am4charts.AxisRenderer) {
    //hide the 0 and 8 xaxis labels,as reponses are only 1-7
    target.minLabelPosition = 0.1;
    target.maxLabelPosition = 0.9;
  }
}
// Themes begin
//am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_material);
am4core.useTheme(am4themes_courseProfiles);
// Themes end

//END SETUP    
//========================================
  


//========================================
//DATA
  
//Build the questions data array
  var chart1questions = new Array(
    "1. Here is a statement that wraps around a number of lines.","2. Here is a statement that wraps around a number of lines.","3. Here is a statement that wraps around a number of lines.","4. Here is a statement that wraps around a number of lines.","5. Here is a statement that wraps around a number of lines.","6. Here is a statement that wraps around a number of lines.","7. Here is a statement that wraps around a number of lines.","8. Here is a statement that wraps around a number of lines.","9. Here is a statement that wraps around a number of lines.","10. Here is a statement that wraps around a number of lines.","11. Here is a statement that wraps around a number of lines.","12. Here is a statement that wraps around a number of lines.","13. Here is a statement that wraps around a number of lines.","14. Here is a statement that wraps around a number of lines.","15. Here is a statement that wraps around a number of lines.","16. Here is a statement that wraps around a number of lines.","17. Here is a statement that wraps around a number of lines.",);
//Build the Answers data array
var chart1data = [
  {'question':chart1questions[0],'answer':4,'mean':null,'score':2},{'question':chart1questions[0],'answer':5,'score':1},'answer':7,'answer':6,'answer':null,'mean':5.3,{'question':chart1questions[1],'score':3},'mean':5.2,{'question':chart1questions[2],'answer':3,{'question':chart1questions[3],'mean':5,{'question':chart1questions[4],'mean':4.8,{'question':chart1questions[5],'answer':2,{'question':chart1questions[6],{'question':chart1questions[7],'mean':4.7,{'question':chart1questions[8],'score':4},{'question':chart1questions[9],'answer':1,{'question':chart1questions[10],{'question':chart1questions[11],{'question':chart1questions[12],{'question':chart1questions[13],'mean':5.7,{'question':chart1questions[14],{'question':chart1questions[15],{'question':chart1questions[16],'mean':5.5,]; 
//END DATA  
//========================================

  
  
//======================================== 
// Create chart
function createChart(chartName,chartData,chartDiv,amchartsConfig) {
  
     // Create chart instance
    var chartName = am4core.create(chartDiv,am4charts.XYChart);
    chartName.maskBullets = false;

    // Add data
    chartName.data = chartData;

    // Create axes
    var categoryAxis = chartName.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.datafields.category = "question";
    categoryAxis.renderer.labels.template.properties.align = 3;
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = true;

    // Configure axis label
    var label = categoryAxis.renderer.labels.template;
    label.wrap = true;
    label.maxWidth = amchartsConfig.questionsWrapLength;
    label.align = "left";

    var  valueAxis = chartName.xAxes.push(new am4charts.ValueAxis()); 
    valueAxis.renderer.opposite = true;
    valueAxis.min = 0;
    valueAxis.max = 8;
    valueAxis.keepSelection = true;
    valueAxis.renderer.minGriddistance = 50;
    valueAxis.numberFormatter = new am4core.NumberFormatter();
    valueAxis.numberFormatter.numberFormat = "#"; 

  return chartName;
};
//========================================
  

  
//========================================  
// Create series
function createSeries(chartName,field,name,bulletvars) {
  var series = chartName.series.push(new am4charts.ColumnSeries());
  series.datafields.valueX = field;
  series.datafields.categoryY = "question";
  series.datafields.value = "score";
  series.columns.template.tooltipText = bulletvars.tooltipLabel+": [bold]{value}[/]";
  series.columns.template.disabled = true;
  series.columns.template.height = am4core.percent(100);
  series.sequencedInterpolation = true;
  series.stacked = true;
//  series.defaultState.transitionDuration = amchartsConfig.transition;

  var bullet = series.bullets.push(new am4core.Circle());
  bullet.tooltipText = bulletvars.tooltipLabel+": {value.workingValue.formatNumber('#.')}";
  bullet.strokeWidth = bulletvars.strokeWidth;
  bullet.stroke = am4core.color(bulletvars.strokeColour);
  bullet.strokeOpacity = bulletvars.strokeOpacity;
  bullet.fill = am4core.color(bulletvars.fillColour);
  bullet.fillOpacity = bulletvars.fillOpacity
  bullet.hiddenState.properties.scale = 0.01;
  bullet.hiddenState.properties.opacity = 0.1;

  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.text = "{value}";
  labelBullet.label.fontSize = 13;
  labelBullet.label.fontStyle = "italic";
  var bulletscoreOffset = maxBulletSize + bulletValueLabelOffset;
  labelBullet.label.fill = am4core.color("#aaa");
  if(bulletvars.bulletType=="mean"){
    bulletscoreOffset = 0 - bulletValueLabelOffset - maxBulletSize;    
    labelBullet.label.fill = am4core.color("#f00");
    labelBullet.label.text = "[font-style: italic]Avg: {valueX}[/]";
  };
  labelBullet.label.dy = bulletscoreOffset;

  var hoverState = bullet.states.create("hover");
  hoverState.properties.strokeOpacity = 1;

  series.heatRules.push({
    property: "radius",target: bullet,min: minBulletSize,max: maxBulletSize
  });

  var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
  categoryLabel.label.fill = am4core.color("#fff");
  
  // Set cell size in pixels
  chartName.events.on("datavalidated",function(ev) {
    // Get objects of interest
    var chartName = ev.target;
    var categoryAxis = chartName.yAxes.getIndex(0);
    // Calculate how we need to adjust chart height
    var adjustHeight = chartName.data.length * amchartsConfig.cellSize - categoryAxis.pixelHeight;
    // get current chart height
    var targetHeight = chartName.pixelHeight + adjustHeight;
    // Set it on chart's container
    chartName.svgContainer.htmlElement.style.height = targetHeight + "px";
  });  
}
//========================================
  
  
//======================================== 
//Finally build one or more charts. 
chart1 = createChart("chart1",chart1data,"chartdiv",amchartsConfig);
createSeries(chart1,"answer","Answer",bulletRespondents);
createSeries(chart1,"mean","Mean",bulletMeanscore);
//========================================
  

}); // end am4core.ready()