Помогите с графиком, кто работал с amCharts

Question

Пожалуйста помогите. Как мне вывести data значение в график как показано на скриншоте? И как мне сделать градиент из 2 цветов? И как при загрузке графика активную часть скролл бара сделать ограниченной, как на скриншоте? И я могу его так же стилизовать? И как? И возможно ли сделать такой hover эффект как на скриншоте? В документации ни могу найти что то конкретное как у меня в макете. Я не так давно изучаю java script и еще мало что знаю. Я уже 3 дня Вожусь с ним и ни как.

am4core.ready(function () {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    var chart2 = am4core.create("layBar_2", am4charts.XYChart);
    chart2.colors.saturation = 1;

    chart2.colors.list = [

      am4core.color("rgb(17, 221, 186)"),
      am4core.color("rgb(90, 105, 240)"),
      am4core.color("rgb(254, 202, 47)"),
      am4core.color("rgb(90, 105, 240)"),
      am4core.color("rgb(254, 202, 47)")
    ];


    chart2.data = [{
      "name": "ЖК Эколайф",
      "startTime": 26.2,
      "endTime": 34.1
    }, {
      "name": "ЖК Панорама",
      "startTime": 25.5,
      "endTime": 31.1
      // "color": chart2.colors.next()
    }, {
      "name": "ЖК Новый город",
      "startTime": 26.1,
      "endTime": 28.2
      // "color": chart2.colors.next()
    }, {
      "name": "ЖК Новый пар",
      "startTime": 26,
      "endTime": 27.5
      // "color": chart2.colors.next()
    }, {
      "name": "ЖК Юпитер",
      "startTime": 25.1,
      "endTime": 31.2
      // "color": chart2.colors.next()
    }];

    var categoryAxis = chart2.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "name";
    categoryAxis.renderer.inversed = true;
    // 
    // categoryAxis.renderer.minGridDistance = 100;
    categoryAxis.renderer.minWidth = 120;
    
    
    var valueAxis = chart2.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.minGridDistance = 100;
    // 
    valueAxis.renderer.maxLabelPosition = 0.98;  

    valueAxis.events.on("ready", function (ev) {
      ev.target.min = 15;
      ev.target.max = 60;
    })

    var series = chart2.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY = "name";
    series.dataFields.valueX = "endTime";
    series.dataFields.openValueX = "startTime";
    series.columns.template.tooltipText = "[bold]{categoryY}[/]\nstarts at {openValueX}\nends at {valueX}";

    series.sequencedInterpolation = true;
    series.defaultState.transitionDuration = 1000;
    series.sequencedInterpolationDelay = 100;
    series.columns.template.strokeOpacity = 0;


    var columnTemplate = series.columns.template;
    columnTemplate.strokeOpacity = 0;
    columnTemplate.propertyFields.fill = "color";
    columnTemplate.column.cornerRadius(500, 500, 500, 500);
    columnTemplate.height = am4core.percent(65);

// 
    // chart2.cursor = new am4charts.XYCursor();
    // chart2.cursor.behavior = "zoomY";
/// 

    // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
    series.columns.template.adapter.add("fill", (fill, target) => {
      return target.dataItem ? chart2.colors.getIndex(target.dataItem.index) : fill;
    });


    var fillModifier = new am4core.LinearGradientModifier();
    fillModifier.lightnesses = [0.5, 0];
    fillModifier.offsets = [0, 1];
    fillModifier.gradient.rotation = 0;
    series.columns.template.fillModifier = fillModifier;




    chart2.scrollbarX = new am4core.Scrollbar();

    function customizeGrip(grip) {
      grip.start = 0.2;
      grip.icon.disabled = true;
      grip.background.disabled = true;
      // This is empty for now
    }

    customizeGrip(chart2.scrollbarX.endGrip);
    chart2.scrollbarX = new am4core.Scrollbar();
    chart2.scrollbarX.parent = chart2.bottomAxesContainer;
    chart2.startGrip = 22;

  }); // end am4core.ready()

#layBar_2 {
  width: 1200px;
  height: 500px;
}

<div id="layBar_2"></div>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

https://codepen.io/mihazzz123/pen/xxGzaoZ

демка

БЛОГ НА HUSL

Помогите с графиком, кто работал с amCharts

Ответы (0 шт):