Как включить пользовательское значение в серию amcharts для расчета - PullRequest
Новая
       6

Как включить пользовательское значение в серию amcharts для расчета

0 голосов
/ 15 февраля 2019

Как включить новую пользовательскую переменную для определения местоположения маркера на основе avgTime в chart.data

Мы не можем назначить avgTime для openBullet.locationX = avgTime;как это.

Если я добавляю avgTime в locationX, он выдает ошибку, как будто avgTime не определен.

Найдите приведенный ниже код для справки 

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

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

chart.data = [{
  "name": "John",
  "startTime": 8,
  "endTime": 11,
  "avgTime": 0.5,
  "color": chart.colors.next()
}, {
  "name": "Joe",
  "startTime": 10,
  "endTime": 13,
  "avgTime": 0.8,
  "color": chart.colors.next()
}, {
  "name": "Susan",
  "startTime": 11,
  "endTime": 18,
  "avgTime": 0.1,
  "color": chart.colors.next()
}, {
  "name": "Eaton",
  "startTime": 15,
  "endTime": 19,
  "avgTime": 0,
  "color": chart.colors.next()
}];

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

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.minGridDistance = 50;

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

var columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
//columnTemplate.height = am4core.percent(100);

//var openBullet = columnSeries.bullets.create(am4charts.CircleBullet);
//openBullet.locationX = avgTime;

var circleBullet = columnSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.locationX = /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

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

chart.data = [{
  "name": "John",
  "startTime": 8,
  "endTime": 11,
  "avgTime": 0.5,
  "color": chart.colors.next()
}, {
  "name": "Joe",
  "startTime": 10,
  "endTime": 13,
  "avgTime": 0.8,
  "color": chart.colors.next()
}, {
  "name": "Susan",
  "startTime": 11,
  "endTime": 18,
  "avgTime": 0.1,
  "color": chart.colors.next()
}, {
  "name": "Eaton",
  "startTime": 15,
  "endTime": 19,
  "avgTime": 0,
  "color": chart.colors.next()
}];

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

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.minGridDistance = 50;

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

var columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
//columnTemplate.height = am4core.percent(100);

//var openBullet = columnSeries.bullets.create(am4charts.CircleBullet);
//openBullet.locationX = avgTime;

var circleBullet = columnSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.locationX = {avgTime};


var labelBullet = columnSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{avgTime}";
labelBullet.label.dx = +20;
labelBullet.locationX = 0.2;;


var labelBullet = columnSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{avgTime}";
labelBullet.label.dx = +20;
labelBullet.locationX = 0.2;

1 Ответ

0 голосов
/ 15 февраля 2019

Я не совсем уверен, правильно ли я понял ваш вопрос.Чтобы установить положение маркеров, вы должны установить значение в propertyFields в соответствии с именем значения в ваших данных: 

circleBullet.propertyFields.locationX = "avgTime";

Я создал кодовое перо сваш пример кода.Надеюсь, что это поможет.

РЕДАКТИРОВАТЬ: В соответствии с ответом от zeroin вы должны рассмотреть возможность изменить avgTime на 1 - avgTime, потому что он отображается начиная сконец столбца.

...