amcharts 4 - предыдущая версия 3 пользователя с некоторыми проблемами - PullRequest
Новая
       11

amcharts 4 - предыдущая версия 3 пользователя с некоторыми проблемами

0 голосов
/ 02 декабря 2018

Я уже давно использую amcharts версии 3 и хотел бы перейти на новую версию 4. У меня возникли проблемы с копированием того, что я делал в более старой версии.Я просмотрел документы и примеры, попробовал разные вещи, но все еще не могу заставить себя вести себя так, как я хочу.

  • первый 'день / значение' отсечен по осям

  • дни по оси X не центрированы с днями, отображаемыми курсором, который выглядит очень странно

  • должно быть только 7показаны точки данных (7 дней), но в конце всегда отображается дополнительный день, в котором с правой стороны графика отображается пустое место

  • Я не могу получить всплывающую подсказку о значениипо центру точки данных

  • наконец, я вообще не могу изменить формат даты и пробовал каждый пример, показанный в документе для этого [ИСПРАВЛЕНО]

Мне интересно, связано ли это с использованием меток времени в моих данных.В предыдущей версии с этим проблем не было. 

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

chart.data = randomData();
chart.fontSize = 12;
chart.paddingRight = 0;
chart.paddingLeft = 0;
chart.paddingTop = 20;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.grid.template.location = 0;
dateAxis.tooltip.background.pointerLength = 0;
dateAxis.tooltip.fontSize = 12;

//fixes the date display
dateAxis.dateFormats.setKey("day", "EEE, MMM dd");
dateAxis.periodChangeDateFormats.setKey("day", "EEE, MMM dd");

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.min = 0;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "timestamp";
series.dataFields.valueY = "count";
series.stroke = am4core.color("#eb4741");
series.strokeWidth = 2;
series.tensionX = 0.8;
series.fill = am4core.color("#eb4741");
series.fillOpacity = 0.1;
series.tooltipText = "Total : {valueY}";
series.tooltip.background.pointerLength = 0;
series.tooltip.fontSize = 12;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.background.fillOpacity = 1;

var dropShadow = new am4core.DropShadowFilter();
dropShadow.dy = 0;
dropShadow.dx = 0;
dropShadow.opacity = 0;
series.tooltip.filters.push(dropShadow);

var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 2;

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.opacity = 0;
chart.cursor.lineY.opacity = 0;

//random data generator up to 300
function randomData() {

    var curr_date = $.now();

    //counter
    var count = 7;

    //rand value
    function randValue() {
        return Math.floor(Math.random() * 300);
    }

    series = [  
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()}
    ];

    return series;
}

Fiddle находится на JSFiddle

РЕДАКТИРОВАТЬ: мне удалось исправить проблему форматирования даты, когда я столкнулся с кем-то ещес той же проблемой.Скрипка обновлена, но все еще возникают проблемы с другими вещами.

1 Ответ

0 голосов
/ 04 декабря 2018
  • первый 'день / значение' обрезается по осям
  • дни по оси х не центрированы с днями, отображаемыми курсором, что выглядит очень странно

Я думаю, что это поведение по умолчанию, когда на странице заканчивается свободное место.Метки, а также направляющие линии не выровнены с точками данных.

Например: https://www.amcharts.com/demos/date-based-data/

enter image description here

Идля этого есть причина , которая объясняется в документации: https://www.amcharts.com/docs/v4/concepts/axes/#Labels_on_Date_axis

Чтобы «заставить» метки совпадать с точками данных, единственный способ, который я обнаружил, - этоустановите minGridPosition на небольшое число.Но у этого есть недостаток отображения каждой метки, даже когда не хватает места, что заставляет все метки сжиматься вместе: 

...,
xAxes: [{
    type: "DateAxis",
    renderer: {
        grid: {
            disabled: true
        },
        minGridDistance: 1
    },
    tooltip: {
        fontSize: 12,
        background: {
            pointerLength: 0
        }
   }
}],
...

enter image description here

демо: http://jsfiddle.net/davidliang2008/0shze83d/

  • Не удается получить всплывающую подсказку о значении по центру точки данных

Необходимо изменить pointerOrientation к «вертикали», в отличие от его стороны.Кроме того, вы можете также выровнять текст: 

...,
series: [{
    type: "LineSeries",
    ...,
    tooltip: {
        pointerOrientation: "vertical",
        textAlign: "middle",
        textVAlign: "middle",
        ...
    },
    ...
}],
...

enter image description here

демо: http://jsfiddle.net/davidliang2008/hy5xeu1w/

...