问题描述
我正在使用 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()
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)