Question

我变得疯狂，因为我无法找到你能想到的最简单的线图的库：为x轴定义一个（双）最小值和最大值，并为它提供（x，y）的元组）价值观。我能找到的每个解决方案都痴迷于这样一个事实：我有一组固定的x值（星期一，星期二，星期四，......）但是我没有在定义的范围内有简单的双值！

无法执行此简单任务的解决方案：ng2-charts，ngx-charts，Highcharts Angular 2，Fusion Charts Angular2

有人可以帮帮我吗？

Answer 1

我认为你可以使用primeng line chart简单而强大的功能。

导入

import {ChartModule} from 'primeng/primeng';

在你的模块中

要使图表组件正常工作，请将charts.js包含在项目中。 CLI的一个例子是;

"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  //..others
],

<强>组件

export class LineChartDemo {

data: any;

msgs: Message[];

constructor() {
    this.data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
            {
                label: 'First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: '#4bc0c0'
            },
            {
                label: 'Second Dataset',
                data: [28, 48, 40, 19, 86, 27, 90],
                fill: false,
                borderColor: '#565656'
            }
        ]
    }
}


}

<强> HTML

 <p-chart type="line" [data]="data"></p-chart>

Angular 4简单折线图，没有固定的x轴值

1 个答案: