Question

如何将每个网格的高度设置为相同的高度？

我已经将外部容器设置为每行数据乘以100px，但是每行的网格高度似乎随着外部高度的增加而增加。请帮忙，非常感谢！

.col-6.cost-info-label
    = timeline_info.name
.poc_chart{:id => "timeline_#{index2}", :style => "width: 100%; height: 
#{height_value}px;"}
%br
%br
%script{:src => "https://www.amcharts.com/lib/4/core.js"}
%script{:src => "https://www.amcharts.com/lib/4/charts.js"}
%script{:src => "https://www.amcharts.com/lib/4/themes/animated.js"}
/ Chart code
:javascript
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var timelines = #{raw timeline_info.to_json};
var timeline_activities = #{raw timeline_activities.to_json};
var num_of_loops = timeline_activities.length
var chart = am4core.create("timeline_#{raw index2}", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
var data_sets = [];
var i;
var k;
var color_counter = 0;
var brighten_sign;
for(i=0; i < num_of_loops; i++){
    var timeline = timeline_activities[i];
    var formatted_start_date;
    var formatted_end_date;
    var actual_start_date;
    var actual_end_date;
    var formatted_name;
    if(timeline_activities[i]["planned_start"] == null){
        formatted_start_date = null;
    }
    else{
        var planned_start = new Date(timeline_activities[i]["planned_start"]);
        formatted_start_date = planned_start.getFullYear() + '-' + (planned_start.getMonth()+1).toString().padStart(2, '0') + '-' + planned_start.getDate().toString().padStart(2, '0');
    }

    if(timeline_activities[i]["planned_end"] == null){
        formatted_end_date = null;
    }
    else{
        var planned_end = new Date(timeline_activities[i]["planned_end"]);
        formatted_end_date = planned_end.getFullYear() + '-' + (planned_end.getMonth()+1).toString().padStart(2, '0') + '-' + planned_end.getDate().toString().padStart(2, '0');
    }

    if(formatted_start_date == null){
        actual_start_date = null;
    }
    else if(timeline_activities[i]["actual_start"] == null){
        actual_start_date = formatted_start_date;
    }
    else{
        var actual_start = new Date(timeline_activities[i]["actual_start"]);
        actual_start_date = actual_start.getFullYear() + '-' + (actual_start.getMonth()+1).toString().padStart(2, '0') + '-' + actual_start.getDate().toString().padStart(2, '0');
    }

    if(formatted_end_date == null){
        actual_end_date = null;
    }
    else if(timeline_activities[i]["actual_end"] == null){
        actual_end_date = formatted_end_date;
    }
    else{
        var actual_end = new Date(timeline_activities[i]["actual_end"]);
        actual_end_date = actual_end.getFullYear() + '-' + (actual_end.getMonth()+1).toString().padStart(2, '0') + '-' + actual_end.getDate().toString().padStart(2, '0');
    }

    if(timeline_activities[i]["name"].length > 20){
        formatted_name = timeline_activities[i]["name"].slice(0, 20) + '...';
    }
    else{
        formatted_name = timeline_activities[i]["name"];
    }
    var random_num = Math.random();
    var random_num_1 = random_num-0.1;
    data_sets.push({
        main: timelines["name"],
        name: formatted_name,
        fromDate: formatted_start_date,
        toDate: formatted_end_date,
        actualStartDate: actual_start_date,
        actualEndDate: actual_end_date,
        color: colorSet.getIndex(0).brighten(0),
        color1: colorSet.getIndex(0).brighten(0.8)
    });
    color_counter++;

};
chart.data = data_sets;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.grid.template.height = 40;
categoryAxis.renderer.inversed = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "yyyy-MM-dd";
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 30, timeUnit: "day" };
dateAxis.max = new Date(2018, 0, 1, 24, 0, 0, 0);
dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "Project Timeline: {main} \n Activity : {name} \n Planned: {openDateX} - {dateX}";

series1.dataFields.openDateX = "fromDate";
series1.dataFields.dateX = "toDate";
series1.dataFields.categoryY = "name";
series1.columns.template.propertyFields.fill = "color"; // get color from data
series1.columns.template.propertyFields.stroke = "color";
series1.columns.template.strokeOpacity = 1;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "Project Timeline: {main} \n Activity :{name} \n Actual: {openDateX} - {dateX}";

series2.dataFields.openDateX = "actualStartDate";
series2.dataFields.dateX = "actualEndDate";
series2.dataFields.categoryY = "name";
series1.columns.template.propertyFields.fill = "color1"; // get color from data
series1.columns.template.propertyFields.stroke = "color1";
series1.columns.template.strokeOpacity = 1;

chart.scrollbarX = new am4core.Scrollbar();

}); // end am4core.ready()

`

设置amchart4甘特图的固定网格高度

0 个答案: