AM4Charts Неверные поля свойств - PullRequest
Новая
       8

AM4Charts Неверные поля свойств

1 голос
/ 17 февраля 2020

Я пытаюсь создать столбчатую диаграмму, в которой в столбце показан процент выполнения какой-либо задачи. Данные обновляются каждые тридцать секунд. Я хочу сделать так, чтобы, когда задание было выполнено на 0-50%, в противном случае столбец зеленый. 

series.columns.template.adapter.add('stroke', (stroke, target) =>
{
    let returnValue;
    if (target.dummyData.level < 50)
        returnValue = "#f26969";
    else 
        returnValue = '#9d4062';
    return am4core.color(returnValue);
})

Где уровень - это часть переменной, называемой разбивкой, назначенной полям свойств через: 

                seriesCanisterLevels.tooltip.propertyFields.dummyData = "breakdown";

Этот код отлично работает при первом запуске (ie при первом отображении графика). Если я установлю начальное значение> или <50, я получу ожидаемое поведение. Однако после этого, поскольку данные динамически изменяются каждые 30 секунд, они не меняют цвет (хотя длина столбцов изменяется). </p>

При некоторых исследованиях выясняется, что изменение свойства propertyField и последующего chart.invalidateRawData () не вызывает повторного запуска адаптеров. Есть ли обходной путь для этого (я не хочу вызывать chart.invalidateData, поскольку я не хочу перерисовывать весь график, хотя это работает)

1 Ответ

1 голос
/ 19 февраля 2020

Адаптеры не будут повторно запускаться, если вы не аннулируете диаграмму и / или связанные с ней элементы напрямую (как вы заметили) или если свойства, связанные с адаптером, были изменены. Вы можете имитировать c последний, циклически перебирая столбцы серии и назначая штрих для себя после обновления данных: 

  series.columns.each(function(column) {
    column.stroke = column.stroke;
  })

Демонстрация ниже: 

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

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

// Add data
chart.data = [{
  "category": "0",
  "value": 50,
  "breakdown": {
    "level": 50
  }
}];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.disabled = true;
categoryAxis.renderer.grid.template.disabled = true;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = 0;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "value";
series.dataFields.categoryY = "category";
series.columns.template.tooltipText = "Text: [bold]{dummyData.level}[/]";
series.columns.template.height = am4core.percent(100);
series.columns.template.strokeWidth = 10;
series.sequencedInterpolation = true;
series.columns.template.propertyFields.dummyData = "breakdown";
series.tooltip.propertyFields.dummyData = "breakdown";
series.columns.template.adapter.add('stroke', (stroke, target) => {
  let returnValue;
  if (target.dummyData.level < 50) {
    returnValue = "#f26969";
  } else {
    returnValue = '#9d4062';
  }
  return am4core.color(returnValue);
});

setInterval(function() {
  var value = Math.floor(Math.random() * 100);
  chart.data[0].value = value;
  chart.data[0].breakdown.level = value;
  chart.invalidateRawData();
  series.columns.each(function(column) {
    column.stroke = column.stroke;
  })
}, 2000)
#chartdiv {
  width: 100%;
  height: 200px;
}
<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>
<div id="chartdiv"></div>
...