`
maxer025
  • 浏览: 79700 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

angular2-highcharts用法详解

阅读更多
angular2-highcharts用法详解

1 使用npm安装angular2-highcharts

npm install angular2-highcharts --save

2、主模块中引入 app.module.ts

import {ChartModule} from "angular2-highcharts";
...
imports: [
    ChartModule
]
...


3、组件中定义图标配置数据,可在highcharts官网查看配置 app.component.ts

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  options:Object;
  constructor() {
    this.options = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares at a specific website, 2014'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        name: 'Brands',
        data: [
          { name: 'Microsoft Internet Explorer', y: 56.33 },
          { name: 'Chrome', y: 24.03 },
          { name: 'Firefox', y: 10.38 },
          { name: 'Safari', y: 4.77 },
          { name: 'Opera', y: 0.91 },
          { name: 'Proprietary or Undetectable', y: 0.2 }
        ]
      }]
    }
  }
}



4、模板中加载图像

<chart [options]="options"></chart>


//参考 https://www.npmjs.com/package/angular2-highcharts
分享到:
评论

相关推荐

    angular2-highcharts:Angular项目的高图

    angular2-highcharts Angular应用程序的Highcharts图表组件。 :backhand_index_pointing_right: 目录 配置 安装angular2-highcharts npm install angular2-highcharts --save 设置应用程序@NgModule import { ...

    ng2-highcharts, Angular2库使用Highcharts跳出盒子.zip

    ng2-highcharts, Angular2库使用Highcharts跳出盒子 ng2-highcharts 更改从 0. x. x 到 1. x. x: KeyValueDiffer 类型已经更改为 KeyValueDiffer, type&gt; 并且它打破了构建,因此在 4.0.0之前

    Angular-angular-highcharts.zip

    Angular-angular-highcharts.zip,角度海图的海图指令,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    angular-highcharts:Angular的Highcharts指令

    这是Angular的Highcharts指令。 要求 { " angular " : " &gt;=10.0.0 " , " highcharts " : " &gt;=7.0.0 " } 安装 纱 # install angular-highcharts and highcharts yarn add angular-highcharts highcharts npm # ...

    angular2-datatable, 带有排序和分页的Angular2简单表组件.zip

    angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件,具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts

    angular-highcharts:Angular Highcharts - 用于您的 AngularJS 应用程序的简单 Highcharts!

    ##如何使用###Install 要使用 bower 安装文件,只需调用$ bower install angular-highcharts 或者您可以简单地从dist文件夹中复制要包含的文件。 ###AngularJS 中的引用通过将模块包含到应用程序的注入数组中来...

    angular2-tour-of-heroes-master

    **Angular2之旅:英雄指南** Angular2是Google推出的一个强大的前端框架,用于构建单页应用程序(SPA)。"Tour of Heroes"是Angular2官方提供的一系列教程,旨在帮助开发者快速掌握Angular2的基础知识和核心概念。...

    Angular-angular2-grid.zip

    Angular-angular2-grid.zip,用于angular2angular 2 grid的基于拖放/调整网格大小的插件指令,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是...

    angular2-baidu-map, Angular2地图的组件.zip

    angular2-baidu-map, Angular2地图的组件 angular2-baidu-map 用于Angular5的百度地图模块在这里阅读完整文档:文档这里读取代码示例:示例请注意,它是完全重写版本,因此不考虑向后兼容性如果你使用的是以前版本的...

    Angular-angular2-draggable.zip

    Angular-angular2-draggable.zip,使dom元素可拖动并可调整大小的angular指令(对于版本&gt;=2.x),Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是...

    angular2-multiselect-dropdown, Angular 2下拉菜单多选.zip

    angular2-multiselect-dropdown, Angular 2下拉菜单多选 Angular2多选下拉菜单 Angular 2用于网络应用程序的多功能下拉菜单。 易于集成和使用。 文档| 演示/示例。 table-内容 1开始启动 。 安装 3使用 。 模板 5...

    前端开源库-angular2-websocket

    前端开源库-angular2-websocketAngular2 WebSocket,基于https://github.com/angularclass/angular-websocket并迁移到Angular2安装

    angular2-demo

    3. **模板和数据绑定**:Angular 2模板使用双向数据绑定,将模型和视图紧密关联。你可以看到`[property]`和`(event)`语法,分别用于属性绑定和事件绑定。 4. **路由**:Angular 2提供了强大的路由功能,允许在不同...

    ng-book2-angular-6-r68

    《ng-book2-angular-6-r68》是深入、全面且与时俱进的Angular 6专著,旨在帮助读者成为Angular 6的专家。这本书涵盖了Angular框架的各个方面,从基础概念到高级特性和最佳实践,旨在让读者对Angular 6有深入的理解。...

    ng-book2-book-angular-6-r70

    ng-book2-book-angular-6该书最新版R70. This book aims to be the single most useful resource on learning Angular. By the time you’re done reading this book, you (and your team) will have everything you...

    Angular ng-animate和ng-cookies用法详解

    在Angular开发中,动画效果能够提升用户体验,使应用更加生动有趣。`ng-animate`和`ng-cookies`是AngularJS中的两个重要组件,分别用于处理动画和管理cookies。 `ng-animate`是Angular的一个插件模块,它允许开发者...

    angular2-notifications, Angular的轻量和易于使用的通知库.zip

    angular2-notifications, Angular的轻量和易于使用的通知库 Angular2-NotificationsAngular 2的轻量和易于使用的通知库。 它同时具有常规页面通知( toasts ) 和推送通知。 向推送通知转移到一个单独的库 ng推送 ...

    angular-google-maps, Angular 2 谷歌地图 组件.zip

    angular-google-maps, Angular 2 谷歌地图 组件 AGM - Angular 谷歌地图谷歌地图的Angular 2 组件。 ( 以前称为 angular2-google-maps )注意:项目 NAME 已经从 angular2-google-maps 映射更改到 AGM

    Angular-Angular2-express-mongoose-gulp-node-typescript.zip

    Angular-Angular2-express-mongoose-gulp-node-typescript.zip,angularjs 2(更新至4.2.0)mean stack应用程序,使用angular2、gulp、express、node、mongodb(mongoose)和存储库模式业务层[angular2更新至4.2.0],...

    Angular-ngx-materialize.zip

    Angular-ngx-materialize.zip,角形环绕物化库,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

Global site tag (gtag.js) - Google Analytics