Angular 可视化库选择 ngx-chart 解决折线图变曲

• 对比echats、ng2-charts，以及hightchart和nvD3，个人还是倾向于使用ngx-charts，原因有几点：

1. 和angular的绑定属性更搭配，语法上看起来很舒适
2. 库表基本上满足需求，当然也可以自己在库的基础上再造轮子
3. 在对比中最让我不舒适的是其它几个库都没有把图表数据单独作为一个元数据，这对于动态生成图表也太不友好了把！
4. 在没有仔细对比的情况下，发现ngx-charts比较惊喜的是交互页面，和能根据数据自动设置xy轴轴标的数据，感觉很友好

• 当然，还是有些缺点的，最恶心的是文档太过简陋了，连所有api都没有单独显示出来。。
  还有就是要
  让折线图变成曲线图竟然还要加个d3-shape的依赖。。。。
  npm i @types/d3-shape --save

• 然后绑定cruve属性
  如

<ngx-charts-line-chart
  [view]="view"
  [scheme]="colorScheme"
  [results]="multi"
  [xAxis]="xAxis"
  [yAxis]="yAxis"
  timeline="0"
  [curve]="curveFunc"
>
</ngx-charts-line-chart>

import { Component, OnInit } from '@angular/core';
import * as shape from 'd3-shape';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit{
  multi: any[];
  view: any[] = [700, 300];

  // options

  xAxis = true;
  yAxis = true;

  colorScheme = {
    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
  };
//绑定cruve属性
  curveFunc = shape.curveCardinal;

  constructor() {
  }

  ngOnInit(): void {
    this.multi = [
      {
        name: 'DSO',
        series: [
          {
            name: '06.01',
            value: 128
          },
          {
            name: '06.15',
            value: 108
          },
          {
            name: '07.01',
            value: 118
          }, {
            name: '07.15',
            value: 110
          }, {
            name: '08.01',
            value: 100
          }, {
            name: '08.15',
            value: 176
          }, {
            name: '09.01',
            value: 140
          },
        ]
      },
    ]
  }

}

更新于几个小时后：

• 我实在想不通我竟然因为表格上每个节点都能一直显示数据，而对这些个框架好失望。。。啊ngx-chart 没有提供api，并且高亮数据的activeEntries属性并不能生效

  • 而且官方文档实在是太不友好了，连api的示例用法都没有，比如自定义悬浮tooltip，竟然不是以属性的方式绑定的，而是需要写一个变量为tooltipTemplate的ng-template。。。
  • 还有个需要吐槽的是，相关资料太少了，除了主要的issues，里面未解决的问题没有回复，就基本上没救了

• 于是我又开始对比其它的框架，ng2和ngx-chart 风格很像，搭配angular舒适，不过是基于chart的框架的衍生品，而且底层实现是canvas。。。对比svg就劣势了一些

  • 看了下chartJs提供的一些设计图表的API，种类比ngx-chart多，不过自己写起来和ngx-chart已经实现好的差不多
  • 值得表扬的是文档终于能看懂了。。

• 还有个g2框架，是国内的，样式还可以，文档因为中文读起来不费力，不过开放的拓展太少了，看似框架很多可是没啥卵用

• 最后还是继续尝试echarts，虽然我真的很讨厌一个options放置所有东西（包括表格数据）的做法，但是使用者多啊，而且问题很容易能搜到解决办法，也能解决我之前的问题，最矛盾的就是不太轻量化。。。为了一个试图显示，不知道值不值当。