0

Всем привет, столкнулся с проблемой, имеется линейный график на amCharts, есть потребность убрать первую и последнюю вертикальные линии на графике. Возможно кто-то сталкивался или имеет представление как, буду благодарен за помощь.

Пример что именно нужно спрятать

    am4core.ready(function() {

// Themes begin
        am4core.useTheme(am4themes_animated);
// Themes end

// Create chart
        var chart = am4core.create("chartdiv", am4charts.XYChart);
        chart.padding(0, 15, 0, 15);
        var colorSale = "#75af26";
        var colorBuy = "#269cb5";
// Load external data
        var data = [];
        var price1 = 1000;
        var price2 = 2000;
        var price3 = 3000;
        var quantity = 1000;
        for (var i = 15; i < 3000; i++) {
            price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
            price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);

            if (price1 < 100) {
                price1 = 100;
            }

            if (price2 < 100) {
                price2 = 100;
            }


            quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 500);

            if (quantity < 0) {
                quantity *= -1;
            }
            data.push({ date: new Date(2000, 0, i), price1: price1, price2:price2, quantity: quantity });
        }


        chart.data = data;

// the following line makes value axes to be arranged vertically.
        chart.leftAxesContainer.layout = "vertical";
        
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location = 0;
        dateAxis.renderer.ticks.template.length = 8;
        dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
        dateAxis.renderer.minLabelPosition = 0.01;
        dateAxis.renderer.maxLabelPosition = 0.99;
        dateAxis.keepSelection = true;
        dateAxis.renderer.fontSize = "13px";
        dateAxis.minHeight = 30;


        dateAxis.groupData = true;
        dateAxis.maxZoomLevel = 1;


        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.tooltip.disabled = true;
        valueAxis.zIndex = 1;
        valueAxis.renderer.baseGrid.disabled = true;
// height of axis
        valueAxis.height = am4core.percent(65);

        valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
        valueAxis.renderer.inside = true;
        valueAxis.renderer.labels.template.verticalCenter = "bottom";
        valueAxis.renderer.labels.template.padding(2, 2, 2, 2);

//valueAxis.renderer.maxLabelPosition = 0.95;
        valueAxis.renderer.fontSize = "13px"

        var series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = "date";
        series.dataFields.valueY = "price1";
        series.tooltipText = "{valueY.value}";
        series.name = "MSFT: Value";
        series.strokeWidth = 3;
        series.stroke = am4core.color(colorSale);
        series.tensionX = 0.77;
        series.defaultState.transitionDuration = 0;



// volume should be summed
        var series2 = chart.series.push(new am4charts.LineSeries());
        series2.dataFields.dateX = "date";
        series2.dataFields.valueY = "price2";
        series2.tooltipText = "{valueY.value}";
        series2.name = "MSFT: Value";
        series2.strokeWidth = 3;
        series2.stroke = am4core.color(colorBuy);
        series2.tensionX = 0.77;
        series2.defaultState.transitionDuration = 0;

        chart.cursor = new am4charts.XYCursor();

        var scrollbarX = new am4charts.XYChartScrollbar();
        scrollbarX.series.push(series);
        scrollbarX.marginBottom = 20;
        scrollbarX.scrollbarChart.xAxes.getIndex(0).minHeight = undefined;
        chart.scrollbarX = scrollbarX;

        var bullet = series.bullets.push(new am4charts.CircleBullet());
        var bullet2 = series2.bullets.push(new am4charts.CircleBullet());
        bullet.circle.stroke = am4core.color("#fff");
        bullet.circle.strokeWidth = 2;
        bullet.fillOpacity = 0;
        bullet.strokeOpacity = 0;
        bullet2.circle.stroke = am4core.color("#fff");
        bullet2.circle.strokeWidth = 2;
        bullet2.fillOpacity = 0;
        bullet2.strokeOpacity = 0;

        var bulletState = bullet.states.create("hover");
        bulletState.properties.fillOpacity = 1;
        bulletState.properties.strokeOpacity = 1;
        var bulletState2 = bullet2.states.create("hover");
        bulletState2.properties.fillOpacity = 1;
        bulletState2.properties.strokeOpacity = 1;


        // Make a panning cursor
        chart.cursor = new am4charts.XYCursor();
        chart.cursor.behavior = "none";
        

    });
#chartdiv{
   width: 100%;
   height: 500px;
}
<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>

<article class="block-content block-chart">
    <div class="wrapper clearfix">
        <div class="wr_inner">
            <div id="chartdiv"></div>
        </div>
    </div>
</article>

12
  • ibb.co/hmBjb4r наверно у нас заблочено это 3 апр 2020 в 7:03
  • Я про горизонтальные говорил, а здесь про первую вертикальную. На графике года отделены вертикальными линиями, и справедливо, что раз начало графика совпадает с началом года имеется и вертикальная вначале. Попробуйте сместить начало на 1 день)
    – Leonid
    3 апр 2020 в 7:06
  • data.push({ date: new Date(2000, 1, i), price1: price1, price2:price2, quantity: quantity }); Вот так получилось, с февраля если
    – Leonid
    3 апр 2020 в 7:11
  • Ну смотрите, вы просто по сути зарезали один месяц январь, я не мел ввиду что-то делать с датами и значениями, а только убрать саму первую и последнюю вертикальные линии. У кого не выполняется код, можно тут(amcharts.com/demos/line-different-colors-ups-downs) глянуть,там есть ссылка на codepen 3 апр 2020 в 7:44
  • @DpaceSpace а amcharts.com....ваще internal error -наверно заблокированный сайт у нас 3 апр 2020 в 8:13

1 ответ 1

1

dateAxis.renderer.grid.template.location = -0.001;

Смещается отображение сетки немного влево, на данные не влияет.

dateAxis.renderer.grid.template.location = 2;

Можно и так, в общем, можете поиграть этим параметром и получить желаемый результат.

am4core.ready(function() {

// Themes begin
    am4core.useTheme(am4themes_animated);
// Themes end

// Create chart
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.padding(0, 15, 0, 15);
    var colorSale = "#75af26";
    var colorBuy = "#269cb5";
// Load external data
    var data = [];
    var price1 = 1000;
    var price2 = 2000;
    var price3 = 3000;
    var quantity = 1000;
    for (var i = 15; i < 3000; i++) {
        price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
        price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);

        if (price1 < 100) {
            price1 = 100;
        }

        if (price2 < 100) {
            price2 = 100;
        }


        quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 500);

        if (quantity < 0) {
            quantity *= -1;
        }
        data.push({ date: new Date(2000, 0, i), price1: price1, price2:price2, quantity: quantity });
    }


    chart.data = data;

// the following line makes value axes to be arranged vertically.
    chart.leftAxesContainer.layout = "vertical";
    
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = -0.001;  // ЗДЕСЬ ЭТО!!!!
    dateAxis.renderer.ticks.template.length = 8;
    dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
    dateAxis.renderer.minLabelPosition = 0.01;
    dateAxis.renderer.maxLabelPosition = 0.99;
    dateAxis.keepSelection = true;
    dateAxis.renderer.fontSize = "13px";
    dateAxis.minHeight = 30;


    dateAxis.groupData = true;
    dateAxis.maxZoomLevel = 1;


    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.zIndex = 1;
    valueAxis.renderer.baseGrid.disabled = true;
// height of axis
    valueAxis.height = am4core.percent(65);

    valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
    valueAxis.renderer.inside = true;
    valueAxis.renderer.labels.template.verticalCenter = "bottom";
    valueAxis.renderer.labels.template.padding(2, 2, 2, 2);

//valueAxis.renderer.maxLabelPosition = 0.95;
    valueAxis.renderer.fontSize = "13px"

    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "date";
    series.dataFields.valueY = "price1";
    series.tooltipText = "{valueY.value}";
    series.name = "MSFT: Value";
    series.strokeWidth = 3;
    series.stroke = am4core.color(colorSale);
    series.tensionX = 0.77;
    series.defaultState.transitionDuration = 0;



// volume should be summed
    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.dateX = "date";
    series2.dataFields.valueY = "price2";
    series2.tooltipText = "{valueY.value}";
    series2.name = "MSFT: Value";
    series2.strokeWidth = 3;
    series2.stroke = am4core.color(colorBuy);
    series2.tensionX = 0.77;
    series2.defaultState.transitionDuration = 0;

    chart.cursor = new am4charts.XYCursor();

    var scrollbarX = new am4charts.XYChartScrollbar();
    scrollbarX.series.push(series);
    scrollbarX.marginBottom = 20;
    scrollbarX.scrollbarChart.xAxes.getIndex(0).minHeight = undefined;
    chart.scrollbarX = scrollbarX;

    var bullet = series.bullets.push(new am4charts.CircleBullet());
    var bullet2 = series2.bullets.push(new am4charts.CircleBullet());
    bullet.circle.stroke = am4core.color("#fff");
    bullet.circle.strokeWidth = 2;
    bullet.fillOpacity = 0;
    bullet.strokeOpacity = 0;
    bullet2.circle.stroke = am4core.color("#fff");
    bullet2.circle.strokeWidth = 2;
    bullet2.fillOpacity = 0;
    bullet2.strokeOpacity = 0;

    var bulletState = bullet.states.create("hover");
    bulletState.properties.fillOpacity = 1;
    bulletState.properties.strokeOpacity = 1;
    var bulletState2 = bullet2.states.create("hover");
    bulletState2.properties.fillOpacity = 1;
    bulletState2.properties.strokeOpacity = 1;


    // Make a panning cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.behavior = "none";
    

});
#chartdiv{
   width: 100%;
   height: 500px;
}
<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>

<article class="block-content block-chart">
<div class="wrapper clearfix">
    <div class="wr_inner">
        <div id="chartdiv"></div>
    </div>
</div>
</article>

5
  • Спасибо, это именно оно! 3 апр 2020 в 10:06
  • Последнюю вряд ли убрать так просто можно без разбора кода, там просто как шаг попадет.
    – Leonid
    3 апр 2020 в 10:06
  • Я дальше разберусь, еще раз спасибо. Нужно английский подтягивать, без него тяжело документацию читать 3 апр 2020 в 10:07
  • Было б на пользу. Не за что.
    – Leonid
    3 апр 2020 в 10:08
  • Мне даже больше 1 нужно было убрать, с последней уже не сильно важно 3 апр 2020 в 10:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.