amCharts 4: Внешний источник данных - PullRequest
Новая
       106

amCharts 4: Внешний источник данных

1 голос
/ 29 мая 2020

Я изо всех сил пытаюсь создать простую горизонтальную гистограмму XY в amCharts 4 с использованием внешнего источника данных.

Все работает нормально с данными c stati (где я адаптировал одну из демонстраций диаграммы из amCharts).

Но когда я заменяю данные stati c на внешний URL-адрес dataSource, диаграмма не генерируется.

Я подозреваю, что проблема может быть в Airtable JSON структура вывода отличается от структуры данных stati c.

Однако я могу полностью ошибиться в этом подозрении, поэтому я буду очень признателен за любую помощь в решении, пожалуйста.

(Я, очевидно, использовал XXX информацию об Airtable в приведенном ниже коде.)

Stati c Источник данных 

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

// Add data
chart.data = [{
  "Name": "Brand Guidelines",
  "Aggregate Responses": 7
}, {
  "Name": "SAP",
  "Aggregate Responses": 3
}, {
  "Name": "Email",
  "Aggregate Responses": 5
}, {
  "Name": "Social Media",
  "Aggregate Responses": 3
}, {
  "Name": "Google Drive",
  "Aggregate Responses": 3
}, {
  "Name": "OneDrive",
  "Aggregate Responses": 4
}, {
  "Name": "SharePoint",
  "Aggregate Responses": 1
}, {
  "Name": "Slack",
  "Aggregate Responses": 3
}, {
  "Name": "Drupal",
  "Aggregate Responses": 2
}, {
  "Name": "Telephone",
  "Aggregate Responses": 3
}];

// Create axes

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Aggregate Responses";
series.dataFields.categoryY = "Name";
series.name = "Aggregate Responses";
series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

Внешние данные Источник 

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

// External data source
chart.dataSource.url = "https://api.airtable.com/v0/appXXXXXXX/airtable-table-name?api_key=keyXXXXXXX";

// Create axes

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Aggregate Responses";
series.dataFields.categoryY = "Name";
series.name = "Aggregate Responses";
series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

Airtable JSON Выход 

{
  "records": [
    {
      "id": "recXXXXXX",
      "fields": {
        "Name": "EpiServer",
        "Typeform Responses": [
          "recXXXXXX",
          "recXXXXXX",
          "recXXXXXX"
        ],
        "Aggregate Responses": 3
      },
      "createdTime": "2020-05-22T16:11:01.000Z"
    },
    {
      "id": "recXXXXXX",
      "fields": {
        "Name": "OneDrive",
        "Typeform Responses": [
          "recXXXXXX",
          "recXXXXXX",
          "recXXXXXX",
          "recXXXXXX"
        ],
        "Aggregate Responses": 4
      },
      "createdTime": "2020-05-22T16:50:41.000Z"
    },
  ]
}

1 Ответ

0 голосов
/ 30 мая 2020

Ваше подозрение на то, что формат отличается, - правильное. AmCharts нужен простой упорядоченный массив объектов, в котором он может найти указанные вами поля, поэтому вам нужно будет преобразовать ваши внешние данные в формат, который может принять AmCharts. Вы можете использовать событие parseended, чтобы повторно сопоставить ваши данные следующим образом: 

    chart.dataSource.events.on("parseended", function(ev) {
      // parsed data is assigned to data source's `data` property
      // pluck data from the records array in your raw data
      ev.target.data = ev.target.data.records.map(function(dataItem) {
        return {
          "Aggregate Responses": dataItem.fields["Aggregate Responses"],
          "Name": dataItem.fields.Name
        }
      });
    });

Пример ниже с использованием вашего кода и URL-адреса данных в кодировке base64 для ваших образцов данных в качестве демонстрации: 

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

// External data source
//chart.dataSource.url = "https://api.airtable.com/v0/appXXXXXXX/airtable-table-name?api_key=keyXXXXXXX";
chart.dataSource.url = dataURI(); //fake URL for demonstration purposes
chart.dataSource.events.on("parseended", function(ev) {
  // parsed data is assigned to data source's `data` property
  ev.target.data = ev.target.data.records.map(function(dataItem) {
    return {
      "Aggregate Responses": dataItem.fields["Aggregate Responses"],
      "Name": dataItem.fields.Name
    }
  });
}); 

// Create axes

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Aggregate Responses";
series.dataFields.categoryY = "Name";
series.name = "Aggregate Responses";
series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

// base64 encoded version of sample data as a data URI
function dataURI() {
  return "data:application/json;base64,eyAicmVjb3JkcyI6IFsgeyAiaWQiOiAicmVjWFhYWFhYIiwgImZpZWxkcyI6IHsgIk5hbWUiOiAiRXBpU2VydmVyIiwgIlR5cGVmb3JtIFJlc3BvbnNlcyI6IFsgInJlY1hYWFhYWCIsICJyZWNYWFhYWFgiLCAicmVjWFhYWFhYIiBdLCAiQWdncmVnYXRlIFJlc3BvbnNlcyI6IDMgfSwgImNyZWF0ZWRUaW1lIjogIjIwMjAtMDUtMjJUMTY6MTE6MDEuMDAwWiIgfSwgeyAiaWQiOiAicmVjWFhYWFhYIiwgImZpZWxkcyI6IHsgIk5hbWUiOiAiT25lRHJpdmUiLCAiVHlwZWZvcm0gUmVzcG9uc2VzIjogWyAicmVjWFhYWFhYIiwgInJlY1hYWFhYWCIsICJyZWNYWFhYWFgiLCAicmVjWFhYWFhYIiBdLCAiQWdncmVnYXRlIFJlc3BvbnNlcyI6IDQgfSwgImNyZWF0ZWRUaW1lIjogIjIwMjAtMDUtMjJUMTY6NTA6NDEuMDAwWiIgfSBdIH0=";
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="CHARTDIV" style="width: 100%; height: 98vh"></div>

Убедитесь, что ваши данные действительны JSON, так как в вашем образце неверная конечная запятая.

...