风一更--软件开发--UI--angular + highChart

目的：实现angular 项目中 Highchart 图表数据可视化

---

reference:

1.official web site : https://www.hcharts.cn/ 

---

2023-04-02

1. angular 安装 Highchart 依赖

npm install highcharts-angular --save
npm install highcharts --save

angular module.ts 中配置

import {HighchartsChartModule} from "highcharts-angular";

@NgModule({
	imports: [
		HighchartsChartModule
		]
});

component.ts

import * as Highcharts from "highcharts";

@Component({
  selector: 'app-result',
  templateUrl: './result.component.html',
  styleUrls: ['./result.component.css']
})
export class ResultComponent implements OnInit{

	Highcharts = Highcharts;
	chartOptions = {};

	ngOnInit(): void {
	    this.chartOptions = {
	      chart:{
	        type:'bar'
	      },
	      ....
	    }
	}
}

html

    <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"
                      style="min-width:400px;height:400px">

    </highcharts-chart>

---

1.示例一：column

1. component.ts 

export class ReportAquaEdgeRegPerformComponent implements OnInit{

  /** high charts **/

  // separation
  separationOptions = {};
  exclusiveStandardHC: typeof Highcharts = Highcharts;
  exclusiveStandardOptions :  Highcharts.Options = {};

  separationGroup = {};

  conditionMatchGroup = [];

  constructor(activatedRoute:ActivatedRoute,
              reportRepository:ReportAquaEdgeRegPerformRepository,
              private reportRest:ReportAquaEdgeRegPerformRest){
    activatedRoute.params.subscribe(res=>{
      reportRepository.store(res);
      this.separationGroup =  reportRepository.separationGroup;
      this.conditionMatchGroup = reportRepository.conditionMatchGroup;
    });
  }

2. html

          <!-- table exclusive standard -->
          <div fxFlex>
              <highcharts-chart [Highcharts]="exclusiveStandardHC" [options]="exclusiveStandardOptions" style="width:100%">
              </highcharts-chart>
          </div><!-- table exclusive standard -->

不同种类 单组数据

1. series: [ { 单个项, 其 data :[ ]  } ] 

---

2. 去除图片右下角水印.

1. 无效操作 node_modeules / highcharts  下的 highcharts.js  或者 highcharts.all.js  修改 credits : { enabled : 0 }  无效

2. 有效操作：在 ng build 之后， 在 main.xxxx.js 里搜索 credits 后修改：

---

2023-07-03  

背景：srdc data platform 项目上 一系列的 chart group, 大小不同, 结合 CSS-Grid 布局

当采用自适应大小时，页面出现时，一系列的 charts 还在自动调整大小, 画面迟滞很严重.

原有的 GRID 设置， 

template-grid-rows: minmax( 00px, 01px)  00 为模拟数值

template-grid-columns: minmax(00px, 01px)  

解决办法：损失了一定的大小自适应，直接将数值固定. 画面迟滞消失。 

（不认为是优雅的解决办法，但可能会与 grid 布局相关）

---