Ngx 图表气泡图建议答案

【问题标题】：Ngx charts bubble chart adviceNgx 图表气泡图建议
【发布时间】：2019-06-12 09:43:43
【问题描述】：

我正在尝试使用 ngx-charts 填充气泡图。问题是关于它的泳道文档几乎不存在，我找不到任何好的例子。

我已经阅读了泳道提供的开源代码，并在 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
        }
      ]
    }
  ];

如果有人能给我一些正确填充图表的建议，我将不胜感激。

【问题讨论】：

您是否在 console.log 中遇到任何错误？

标签： javascript html angular typescript ngx-charts

【解决方案1】：

我最终能够解决它。我将在此处以更新后的形式发布上面相同的 3 个代码 sn-ps。

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
                }
            ]
        }
      ];

这很有效，并且肯定从上面回答了我的问题。话虽这么说，网格线仍然没有出现，但这是一个完全不同的问题，我可能不得不为其发布新票。

【讨论】：