ng2-chart的安装和使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

NPM安装

npm install ng2-charts --save

了解ng2-chart的各类参数

chartType

设置图表的基本类型, 值可以是pipe，doughnut，bar，line，polarArea，radar或horizontalBar。

legend

一个布尔值，用于是否在图表上方显示图例。

datasets

包含数据数组和每个数据集标签的对象数组。

data

数据源，如果只有一个数据集，你可以使用data而不是datasets。

labels

x轴的标签集合

options

包含图表选项的对象。 有关可用选项的详细信息，请参阅官方Chart.js文档。

colors

定义颜色， 传入包含以下值的对象文字数组

更多用法在文档中有说明。

开始使用

html代码部分：

<canvas baseChart width="1600" height="360" [datasets]="chartData.data" [labels]="chartData.labels"
[colors]="chartData.colors" [options]="chartData.options" [chartType]="chartData.chartType">
</canvas>

其中我将所有东西都放在了一个名为chartData的数组里方便进行管理。
这张图表中一共有三条线代表不同的预算，所以使用了[datasets]。

ts代码部分：

ngOnInit(): void {
    this.isLoading = true;
    const url = `plan/chart/budget?time=${this.general.formatTimeToDate(this.time.value)}`;
    this.confSvc.sendGetCatch(url, this.isLoading).subscribe(res => {
      // ——————————图表用数组——————————
      const lineData = res['data'].line;
      this.companyBudgetData = lineData['budget_price']
      this.planBudgetData = lineData['plan_budget'];
      this.productionBudgetData = lineData['production_budget'];
      this.dateData = lineData['complete_date'];
      this.companyBudgetDataCopy.unshift('公司预算/万')
      this.planBudgetDataCopy.unshift('计划部预算/万');
      this.productionBudgetDataCopy.unshift('生产部预算/万');
      this.dateDataCopy.unshift('预计完成日期');
      this.tableData = [
        this.companyBudgetDataCopy,
        this.planBudgetDataCopy,
        this.productionBudgetDataCopy
      ];
      this.tableDataFirst = res['data'].result_data;
      this.chartData = {
        'chartType': 'line',
        'colors': [
          {
            'borderColor': '#FFC125',
            'backgroundColor': 'rgba(0,0,0,0)',
          },
          {
            // 线条颜色
            'borderColor': '#00BFFF',
            // 填充色
            'backgroundColor': 'rgba(0,0,0,0)',
          },
          {
            'borderColor': '#FF0000',
            'backgroundColor': 'rgba(0,0,0,0)',
          }
        ],
        // 数据集
        'data': [
          {
            'data': this.companyBudgetData,
            'label': '公司预算',
          },
          {
            'data': this.planBudgetData,
            'label': '计划部预算',
          },
          {
            'data': this.productionBudgetData,
            'label': '生产部预算',
          }
        ],
        'labels': this.dateData,
        'options': {
          'spanGaps': false,
          'legend': {
            'display': true,
            'position': 'right'
          },
          'title': {
            'display': 'true',
            'text': '一年内计划情况(前6个月和后6个月)',
            'fontSize': '18'
          },
          // 笛卡尔坐标轴
          'scales': {
            'xAxes': [
              {
                'gridLines': {
                  'display': false
                },
                'ticks': {
                  'fontColor': 'rgba(0,0,0,0.54)'
                },
                'scaleLabel': {
                  'display': 'block',
                  'labelString': '预计完成日期'
                }
              }
            ],
            'yAxes': [
              {
                'scaleLabel': {
                  'display': 'block',
                  'labelString': '预算/万'
                }
              }
            ]
          }
        }
      };
      this.confSvc.changeLoading(false);
      this.isLoading = false;
    });
  }

因为离这段代码写完已经过了好一阵子了，当时遇到的很多问题也没有记录（偷懒！大胆！），没有什么可以记录的经验和问题分析，只能放上源代码用于学习…以后千万不能偷懒了…