如何解决自定义 amcharts 折线图滚动条
我正在尝试调整 amcharts 条形图滚动条的大小。默认情况下,grep 栏已满,但我想要 30%。
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.keepSelection = true;
dateAxis.start = 0;
dateAxis.end = 0.3;
在折线图中工作正常,但在条形图中不工作。我已经尝试实现折线图,但结果相同。完整代码:
<script>
am4core.ready(function() {
var chart_type = <?PHP echo json_encode($chart_type); ?>;
if (chart_type == 1) {
am4core.ready(function() {
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv",am4charts.XYChart3D);
chart.paddingBottom = 30;
chart.angle = 35;
var title = chart.titles.create();
title.text = <?PHP echo json_encode($title); ?>;
title.fontSize = 25;
title.marginBottom = 30;
// Add data
chart.data = <?PHP echo json_encode($row1); ?>;
var barwidth = <?PHP echo json_encode($barwidth); ?> ; // Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.datafields.category = "month";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGriddistance = 20;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.grid.template.disabled = true;
let labelTemplate = categoryAxis.renderer.labels.template;
labelTemplate.rotation = -90;
labelTemplate.horizontalCenter = "left";
labelTemplate.verticalCenter = "middle";
labelTemplate.dy = 5; // moves it a bit down;
labelTemplate.inside = false;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
// Create series
var series = chart.series.push(new am4charts.Coneseries());
series.datafields.valueY = "data";
series.datafields.categoryX = "month";
var columnTemplate = series.columns.template;
columnTemplate.adapter.add("fill",(fill,target) => {
return chart.colors.getIndex(target.dataItem.index);
})
columnTemplate.adapter.add("stroke",(stroke,target) => {
return chart.colors.getIndex(target.dataItem.index);
})
chart.scrollbarX = new am4core.Scrollbar();
});
// series.columns.template.width = am4core.percent(barwidth);
} else if (chart_type == 2) {
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv",am4charts.XYChart);
var title = chart.titles.create();
title.text = <?PHP echo json_encode($title); ?>;
title.fontSize = 25;
title.marginBottom = 30;
var data = [];
var data_given = <?PHP echo json_encode($row1); ?>;
var value = 50;
for (x in data_given) {
//console.log(data_given[x].year);
var date = new Date(data_given[x].year,data_given[x].month);
// date.setHours(0,0);
// date.setDate(i);
value = data_given[x].data;
data.push({
date: date,value: value
});
}
//exit();
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
//added fo zoom
dateAxis.keepSelection = true;
dateAxis.start = 0;
dateAxis.end = 0.3;
dateAxis.renderer.minGriddistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.Lineseries());
series.datafields.valueY = "value";
series.datafields.dateX = "date";
series.tooltipText = "{value}"
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
//chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
} else {
// pichart
}
});
</script>
检查图片 折线图(工作)
条形图(不工作)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。