问题自定义列栏的高度

时间:2019-09-01 08:23:09

标签: amcharts4

列栏太小。而且我无法调整他们的身高。屏幕快照附在https://prnt.sc/p09hj9上。有人可以帮忙吗?预先谢谢你!

我已经尝试了https://www.amcharts.com/docs/v4/reference/columnseries/处列系列的所有方法。

    am4core.ready(function() {

        // Create chart instance
        var chart = am4core.create("historical_monthly_chart_range", am4charts.XYChart);

        // Push data into the charts
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); 
        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        var series = chart.series.push(new am4charts.LineSeries());
        series.name = "Price Range";
        valueAxis.title.text = 'Price (S$ psf)';
        series.dataFields.dateX = "date";
        series.dataFields.openValueY = "min";
        series.dataFields.valueY = "max";
        series.tooltipText = "{date} \n Maximum: {max} \n Average: {average} \n Minimum: {min} \n Volume: {value}";

        // Setting the appearance
        series.tooltip.background.cornerRadius = 20;
        series.tooltip.background.strokeOpacity = 0;
        series.tooltip.pointerOrientation = "vertical";
        series.tooltip.label.minWidth = 40;
        series.tooltip.label.minHeight = 40;
        series.tooltip.label.textAlign = "left";
        series.tooltip.label.textValign = "middle";
        series.fillOpacity = 0.5;
        series.tensionX = 0.8;
        series.fill = am4core.color("#697e69");

        var series2 = chart.series.push(new am4charts.LineSeries());
        series2.name = "Minimum Price";
        series2.dataFields.dateX = "date";
        series2.dataFields.valueY = "min";
        series2.stroke = am4core.color("#697e69");
        series2.tensionX = 0.8;

        var series_average = chart.series.push(new am4charts.LineSeries());
        series_average.name = "Average Price";
        series_average.dataFields.valueY = "average";
        series_average.dataFields.dateX = "date";
        series_average.stroke = am4core.color("#000");

        /* Bar chart series */
        var barSeries = chart.series.push(new am4charts.ColumnSeries());
        barSeries.dataFields.valueY = "value";
        barSeries.dataFields.dateX = "date";
        barSeries.fill = am4core.color("#000");
        barSeries.columns.width = am4core.percent(60);

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.xAxis = dateAxis;

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

1 个答案:

答案 0 :(得分:0)

AM图表对此问题有很大的帮助,但是一种解决方法是使用Y轴上的滚动条,如下所示:

chart.scrollbarY = new am4core.Scrollbar();

这不是我同意的最佳解决方案,但是您可以使用它通过按钮稍微缩放并缩放并查看

让我知道它是否有效!