Создавайте графики с помощью amchart динамически - PullRequest
Новая
       20

Создавайте графики с помощью amchart динамически

0 голосов
/ 31 января 2020

у меня есть массив объектов, и каждый объект имеет следующую структуру: 

{
      id : '1',
      name: 'Room 1',
      data: [
              {
                name : 'Cars',
                dataChart: [{
                  "type": "Active",
                  "quantity": 71,

                }, {
                  "type": "Inactives",
                  "quantity": 4,

                }]
              },
              {
                name : 'Motorcycles',
                dataChart: [{
                  "type": "Active",
                  "quantity": 3,

                }, {
                  "type": "Inactive",
                  "quantity": 0,

                }]
              },
              {
                name : 'Bikes',
                dataChart: [{
                  "type": "Active",
                  "quantity": 38,

                }, {
                  "type": "Inactive",
                  "quantity": 2,

                }]
              },
              { ... and so on },
            ]
      }

массив имеет несколько комнат, и мне нужно создать диаграмму amchart p ie для каждого транспортного средства в комнате с данные в ключе dataChart.

Я знаю, как создать одну диаграмму p ie, но я не знаю, как реализовать это для динамического создания всех диаграмм.

Single p ie диаграмма: JavaScript

createChart() {
    let chart = am4core.create("chartdiv", am4charts.PieChart);
    chart.hiddenState.properties.opacity = 0; 
    chart.data = [{
      "type": "Active",
      "quantity": 71,

    }, {
      "type": "Inactive",
      "quantity": 4,

    }];
    chart.radius = am4core.percent(70);
    chart.innerRadius = am4core.percent(40);
    chart.startAngle = 180;
    chart.endAngle = 360;  
    let series = chart.series.push(new am4charts.PieSeries());
    series.dataFields.value = "quantity";
    series.dataFields.category = "type";
    series.slices.template.cornerRadius = 10;
    series.slices.template.innerCornerRadius = 7;
    series.slices.template.draggable = true;
    series.slices.template.inert = true;
    series.alignLabels = false;
    series.ticks.template.disabled = true;
    series.labels.template.radius = am4core.percent(-20);
    series.labels.template.fill = am4core.color("white");
    series.labels.template.text = "{value.percent.formatNumber('#.')}%  ({value})";
    series.hiddenState.properties.startAngle = 90;
    series.hiddenState.properties.endAngle = 90;
    series.colors.list = [
      am4core.color("#70AD47"),
      am4core.color("#C00000"),
    ];
    let label = chart.seriesContainer.createChild(am4core.Label);
    label.textAlign = "middle";
    label.horizontalCenter = "middle";
    label.verticalCenter = "middle";
    label.y = -25;
    label.adapter.add("text", function(text, target){
      return "[bold font-size:25px]"+series.dataItem.values.value.sum+"[/]\n[ font-size:15px] total" ;
    })
    let chartTitle = chart.createChild(am4core.Label);
    chartTitle.text = "Cars";
    chartTitle.fontSize = 20;
    chartTitle.isMeasured = false;
    chartTitle.align = "left";
    chartTitle.y = 80;
  }

Html

<div id="chartdiv"> </div>

Спасибо!.

PS Извините за ошибки, я не знаю, как говорить Engli sh.

...