Советы по пузырьковой диаграмме NGX Charts

Я пытаюсь получить пузырьковую диаграмму для заполнения с помощью ngx-диаграмм. Проблема в том, что документация по дорожкам практически отсутствует, и мне не удалось найти хороших примеров.

Я прочитал открытый исходный код, который предоставляет Swimlane, и создал то, что я считаю подходящими переменными в Typescript, и построил свои точки данных, используя пример линейного графика, который я нашел с помощью тех же инструментов. Однако диаграмма все еще остается пустой на странице.

HTML:

<ngx-charts-bubble-chart
      [view]="view"
      [results]="bubbleDemoTempData"
      [showGridLines]="showGridLines"
      [legend]="showLegend"
      [legendTitle]="legendTitle"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      [scheme]="colorScheme"
      [minRadius]="minRadius"
      [maxRadius]="maxRadius"
      (select)="onSelectBubbleInteractivePoint($event)"
      *ngIf="dataTypeDisplay == 'GraphForm'" 
      [@fade]>
</ngx-charts-bubble-chart>

Машинопись:

view: any[] = [700, 400];

// options
showXAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
showYAxis = true;
gradient = false;
showLegend = true;
legendTitle = "Hi";
xAxisLabel = 'Number';
yAxisLabel = 'Color Value';
showGridLines = true;
autoScale=true;
minRadius = 1;
maxRadius = 1;

colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

Точки данных:

public multi = [
    {
      "name": "Germany",
      "series": [
        {
          "name": "2010",
          "value": 7300000
        },
        {
          "name": "2011",
          "value": 8940000
        }
      ]
    },

    {
      "name": "USA",
      "series": [
        {
          "name": "2010",
          "value": 7870000
        },
        {
          "name": "2011",
          "value": 8270000
        }
      ]
    },

    {
      "name": "France",
      "series": [
        {
          "name": "2010",
          "value": 5000002
        },
        {
          "name": "2011",
          "value": 5800000
        }
      ]
    }
  ];

Буду признателен, если кто-нибудь даст мне совет по правильному заполнению диаграммы.


typescript javascript angular html ngx-charts
person Kron    schedule 12.06.2019    source источник
comment
у вас есть ошибка в console.log?   -  person KiraAG    schedule 12.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

В конце концов я смог это уладить. Я опубликую здесь те же 3 фрагмента кода в их обновленных формах.

HTML:

<ngx-charts-bubble-chart
        [results]="bubbleDemoTempData"
        [view]="view"
        [showGridLines]="showGridLines"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPOsition"
        [xAxis]="XAxis"
        [yAxis]="YAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        [roundDomains]="roundDomains"
        [minRadius]="minRadius"
        [maxRadius]="maxRadius"
        [autoScale]="autoScale"
        [schemeType]="schemeType"
        (select)="onSelectBubbleInteractivePoint($event)"
        *ngIf="dataTypeDisplay == 'GraphForm'" 
        [@fade]>
    </ngx-charts-bubble-chart>

Машинопись:

view: any[] = [700, 400];

// options
showGridLines = true;
legend = true;
legendTitle = "Dots Mf'er";
legendPosition = "right";
xAxis = true;
yAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = "LR";
yAxisLabel = "Jobs";
trimXAxisTicks = true;
trimYAxisTicks = true;
rotateXAxisTicks = true;
maxXAxisTickLength = 16;
maxYAxisTickLength = 16;
// xAxisTicks;
// yAxisTicks;
roundDomains = false;
maxRadius = 5;
minRadius = 5;
autoScale = true;
schemeType = "ordinal";
tooltipDisabled = false;

Точки данных:

public bubbleDemoTempData = [
        {
          "name": "Example1",
          "series": [
            {
              "name": "a",
              "x": 0,
              "y": 0,
              "r": 1
            },
            {
                "name": "b",
                "x":10,
                "y":3,
                "r":10
            }
          ]
        },
        {
            "name":"Example2",
            "series": [
                {
                    "name":"1",
                    "x":20,
                    "y":1,
                    "r":30
                },
                {
                    "name":"2",
                    "x":3,
                    "y":3,
                    "r":500
                }
            ]
        }
      ];

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

person Kron    schedule 12.06.2019