自定义 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 (将#修改为@）