标签: ngx-charts

我正在使用 ngx-charts 绘制时间序列数据。

我正在使用他们的例子

<ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>

它确实有一个配色方案选项，但只会更改线条及其对应域的颜色。

xAxisTickFormatting 和 yAxisTickFormatting 还有另一个选项，但我不确定如何使用它

我希望 x 轴和 y 轴标签的颜色类似于此示例 https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart

使用ngx-charts,特别是垂直条形图,我发现元素的限制不会显示条形.

我相信这个限制与图表的可用宽度和元素数量有关,这当然是有意义的.

我复制了'问题'修改官方示例(源数据在data.ts内):

• n =限制元素:plunkr(存在条)
• n + 1个元素:plunkr(棒消失)

我的问题是:有没有办法防止这种情况,比如在需要时添加滚动条,还是更好？

如果没有,是否有一个事件/日志/钩子我可以用来至少检测它正在发生并隐藏图表/通知用户？

值得注意的是,当条形消失时,它们的g>路径节点也会从DOM中消失.

我也在这里粘贴它的角度模板代码,因为'plunkr必须伴随代码'限制,也许它有帮助:

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>

我正在使用ngx-admin，并且正在尝试使ngx-line-chart响应。

我的图表在nb卡中，当我调整窗口大小时，nb卡完全响应。因此，我希望调整图表大小以适合nb卡。

我的html代码：

<div style="margin: 100px auto auto">
    <nb-card>
        <nb-card-header>XXXXXXXXXX</nb-card-header>
            <nb-card-body>
                <ngx-line-chart></ngx-line-chart>
            </nb-card-body>
    </nb-card>
</div>

我的组件：

import { Component } from '@angular/core';

@Component({
    selector: 'ngx-line-chart',
    template: `
    <ngx-charts-line-chart
      [scheme]="colorScheme"
      [results]="multi"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel">
    </ngx-charts-line-chart>
  `,
})
export class LineChartComponent {
    showXAxis = true;
    showYAxis = true;
    showXAxisLabel = true;
    xAxisLabel = 'Date';
    showYAxisLabel = true;
    yAxisLabel = 'Services effectués';
    colorScheme = {
        domain: ['blue'],
    };
    themeSubscription: any;
    multi = [
        {
            name: 'Services effectués',
            series: [
                { …

我试图在我的develepping平台中实现一些统计数据,我尝试使用ngx-charts来显示它们.但是我得到一个错误,我无法弄清楚为什么.

我正在使用storedProcedures进行MySQL统计,我从Java Restful Backend调用它并在Angular 5前端返回它们.返回的表格包含以下两个字段:日期和每天的事件数.所以后端返回的表有这两列.

我呈现图表的组件代码如下:

import {Component, OnInit} from '@angular/core';
import {StatisticsService} from '../../statistics.service';


class Data {

  private _name: string;
  private _value: number;

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }

  get value(): number {
    return this._value;
  }

  set value(value: number) {
    this._value = value;
  }

}


@Component({
  selector: 'app-daily-incidents-statistics',
  templateUrl: './daily-incidents-statistics.component.html',
  styleUrls: ['./daily-incidents-statistics.component.css']
})


export class DailyIncidentsStatisticsComponent implements OnInit {


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

  // options …

我目前在Angular2中使用ngx-charts，我想自定义一些图例，例如将图例放置在图表下方，或重命名图例字段，或扩大图例的范围（部分文本会被截断..）等等

有什么好的选项可以自定义图例？还是一般不可能，或者最好的方法是什么？目前，我的图表图例如下所示：

有些图例太宽，有些图例被切除，我想将图例放置在图表下方，例如...

我建设使用泳道的NRX个图表的图形数据表示的应用程序,但我发现了奇怪的行为,当我通过更新的刷新按钮,数据重新调用get函数来更新数据阵列.我正在使用@ angular/flex-layout作为"类似瓦片"的视图,但即使不使用它,我仍然遇到这个问题 - 它只是增长了父容器.我不想在[view]属性中使用硬编码的px值,因为我希望它可以使用任何大小的图形/磁贴.

我使用了一个非常基本的垂直条形图:

<div>
    <div>
        <ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true"></ngx-charts-bar-vertical>
    </div>
    <div>
        <!-- Got a table here -->
    </div>
</div>

要更新我dataArray正在做的事情:

export class DashboardComponent implements AfterViewInit {
    constructor(private httpClient: HttpClient, private datePipe: DatePipe, private dataService: DataService) { }

    dataArray: any[] = [];

    getData(): void {

        this.dataService.getSomeData<any[]>().subscribe(d => {
                this.dataArray = d;
        });
    }

    // Init
    ngAfterViewInit(): void {
        this.getData();
    }
}

在初始加载时,它很好并将填充容器(它可以在哪里)但是当我点击刷新按钮时,这是我得到的行为:

感谢您的时间.

我正在尝试使用角度为4.x的ngx-charts构建堆积条形图.在显示数据标签时,我正在使用工具提示模板并能够显示,但我希望这些标签始终显示(而不是仅在鼠标悬停时).

我如何在ngx图表中实现这一目标？

我正在开发一个角度应用程序并使用 ngx-charts，经过在线调试和搜索一段时间后，我找不到如何更改图表上的调色板。

默认的角度调色板如下所示：

你们知道如何更改 ngx-charts 上的调色板吗？

非常感谢任何帮助，谢谢！

对于 ngx-charts 折线图，它显示折线图，但没有数据点的点。

如果将鼠标悬停在数据点上，它会显示数据品脱的点以及标签工具提示。

我喜欢用折线图来像这样一直用点显示所有数据点。

我需要您帮助了解如何在 ngx-charts 折线图中的数据点处显示点

这是 ngx-chart 的示例https://github.com/kedmenecr/cinnamon-angular5-with-ngx-charts

这是 ngx-chart libary 的源代码。https://github.com/swimlane/ngx-charts

谢谢。

我正在设置折线图的一个简单示例，但它因未定义错误的 getColor 失败。如果我删除 [results] 数据，图表会显示，但随后会因丢失数据而失败。不知道如何追踪这个问题？

使用 ngx-charts 12.0.1 我从https://github.com/marjan-georgiev/Angular-CLI-ngx-charts-Demo复制了示例代码，然后在下面的示例中显示的主页中添加了第二个图表。

我尝试删除尽可能多的变量以获得结果。

标签：

<div style="height: 100px">
  <ngx-charts-line-chart
    [view]="view"
    [results]="single"
    class="chart-container"
    [scheme]="colorScheme"
    [legend]="showLegend"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    (select)="onSelect($event)"
    (activate)="onActivate($event)"
    (deactivate)="onDeactivate($event)"
  >
  </ngx-charts-line-chart>
</div>

component data:
single: any[] = [
    {
      name: "Germany",
      value: 8940000
    },
    {
      name: "USA",
      value: 5000000
    },
    {
      name: "France",
      value: 7200000
    },
    {
      name: "Mars",
      value: 720000
    }
  ];


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

Console Error with [results]: 
    ERROR …