当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

angular2-highcharts

📊 📈 Highcharts for your Angular project
授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 颛孙哲
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

⚠️ Not supported anymore.
Consider using the offical Highcharts wrapper for Angular

angular2-highcharts

Highcharts chart components for Angular apps. �� Live Demo

Table of Contents

Setting Up

Install angular2-highcharts

npm install angular2-highcharts --save

Setup App @NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(require('highcharts'))
    ],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

For angular-cli and other Webpack environments

No any additional setup needed

For SystemJS environment

You should add appropriate mapping to your systemjs.config.js

...
map: {
  ...
  'angular2-highcharts': 'node_modules/angular2-highcharts',
  'highcharts': 'node_modules/highcharts',
}
...
packages: {
  ...
  highcharts: {
    main: './highcharts.js',
    defaultExtension: 'js'
  },
  'angular2-highcharts': {
    main: './index.js',
    defaultExtension: 'js'
  }
}

Usage

Basic Usage

Create First Chart Component

Main charts functionality provided by the chart component and its options property.

import { Component } from '@angular/core';

@Component({
    selector: 'simple-chart-example',
    template: `
        <chart [options]="options"></chart>
    `
})
export class App {
    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: Object;
}

�� Live Demo

Handling Events

Highcharts itself provides bunch of events, and you still can use them with angular2-higcharts via the options property of the chart component. But it is not an angular way to handle events like this. So that angular2-higcharts provides EventEmitter<ChartEvent> wrappers for highcharts events. ChartEvent is an angular2-higcharts class which simply wraps original Highcharts events (chartEvent.originalEvent) and adds event handler context (chartEvent.context) since it differs depending on events.

Chart Events

All the events from the options.chart.events are available as output properties of the chart component.

<chart [options]="options" (selection)="onChartSelection($event)"> </chart>
onChartSelection (e) {
  this.from = e.originalEvent.xAxis[0].min.toFixed(2);
  this.to = e.originalEvent.xAxis[0].max.toFixed(2);
}

�� Live Demo

Series Events

To use series events the same way you need to add the series component as a child of your chart. The only purpose of this auxiliary component is to provide access to options.plotOptions.series.events API

<chart [options]="options">
    <series (mouseOver)="onSeriesMouseOver($event)">
    </series>
</chart>
<p><b>{{serieName}}</b> is hovered<p>
onSeriesMouseOver (e) {
  this.serieName = e.context.name;
}

�� Live Demo

Point Events

Similary you can use the point to access to options.plotOptions.series.point.events API.

<chart [options]="options">
    <series>
        <point (select)="onPointSelect($event)"></point>
    </series>
</chart>
<p><b>{{point}}</b> is selected<p>

�� Live Demo

Axis Events

Similary you can use the xAxis or yAxes to access to options.xAxis.events or options.yAxis.events API.

<chart [options]="options">
     <xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>
     <yAxis (afterSetExtremes)="onAfterSetExtremesY($event)"></yAxis>
</chart>
<p>{{minX}} - {{maxX}}<p>
<p>{{minY}} - {{maxY}}<p>
onAfterSetExtremesX (e) {
  this.minX = e.context.min;
  this.maxX = e.context.max;
}
onAfterSetExtremesY (e) {
  this.minY = e.context.min;
  this.maxY = e.context.max;
}

�� Live Demo

Dynamic Interaction with Chart Object

angular2-higcharts provides possibility to interact with native HighchartsChartObject chart object.

@Component({
    selector: 'my-app',
    directives: [CHART_DIRECTIVES],
    template: `
      <chart [options]="options" 
             (load)="saveInstance($event.context)">
      </chart>
    `
})
class AppComponent {
    constructor() {
        this.options = {
          chart: { type: 'spline' },
          title: { text : 'dynamic data example'}
          series: [{ data: [2,3,5,8,13] }]
        };
        setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 1000);
    }
    chart : Object;
    options: Object;
    saveInstance(chartInstance) {
        this.chart = chartInstance;
    }
}

�� Live Demo

Highstock

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

Also you need to change your @NgModule setup.

...
@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
-       require('highcharts'),
+       require('highcharts/highstock')
      )
    ]
})

�� Live Demo

Highmaps

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

Also you need to change your @NgModule setup.

...
@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
-       require('highcharts'),
+       require('highcharts/highmaps')
      )
    ],
})

�� Live Demo

Add Highcharts Modules

Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module

...
@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        require('highcharts'),
+       require('highcharts/highchart-3d'),
+       require('highcharts/modules/exporting')
      )
    ],
})

Check out structure of the node-modules/highcharts folder to find necessary module.

�� Live Demo

Access to the Highcharts Static API

...
const Highcharts = require('highcharts');

Highcharts.setOptions({
  colors: ['#50B432']
});

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
-       require('highcharts'),
+       Highcharts
      )
    ],
})

�� Live Demo

##More Examples

Here are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples/webpack

##FAQ

Why don't my series, title, axes and etc redraw after I update initial options ?

Because angular-highcharts is just a thin wrapper of the [Highcharts](http:/ /www.highcharts.com/) library and doesn't bind to initial options. I understand that you expect more angular-way behaviour like data binding with appropriate redrawing. But it is barely possible to implement it without redundant complications and performance decrease because almost all options can be dynamic. So my idea was to avoid any additional logic more than just a sugar (like events for series and options). In the other hand Highcharts has great API for dynamic manipulations with chart and angular-highcharts provides you access to the original chart object.

License

MIT @ Eugene Gluhotorenko

  • 1、 使用npm安装angular2-highcharts npm install angular2-highcharts --save 2、主模块中引入 app.module.ts import {ChartModule} from "angular2-highcharts"; ... imports: [ ChartModule ] ... 3、组件中定义图标配置数据,可在highch

  • 1、 使用npm安装angular2-highcharts npm install angular2-highcharts --save 2、主模块中引入 app.module.ts import {ChartModule} from "angular2-highcharts"; ... imports: [ ChartModule ] ... 3、组件中定义图标配置数据,可在highch

  • 当前情况是这样,同一个component中的一个dialog里面会展示一个chart,dialog hide之后希望destroy了 destoryHistoricalChart() { this.historicalChart.destroy(); } <p-dialog header="Historical Insight" (onHide)="destoryHistorica

 相关资料
  • 我使用Angula-CLI创建了一个新项目,我遵循了https://www.npmjs.com/package/angular2-highcharts页面建议的所有步骤 npm install angular2-highcharts--保存从“angular2-highcharts”导入{ChartModule};ChartModule.forRoot(require('highCharts')

  • Highcharts 是一个制作图表的纯 Javascript 类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等; 对个人用户完全免费; 纯 JS,无 BS; 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼状图、散布图; 跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用,它只需要三个文件:一个是 Highcharts

  • Highcharts Android 是官方发布的 Andrioid 扩展包,可以很方便的在 Android 开发环境中使用 Highcharts 创建交互性图表。 开发环境 下载好的 Highcharts 框架 Highcharts 框架的下载 有以下两种方式可以下载 Highcharts 框架: 方法一: 直接在 gradle 文件中添加 Highcharts 仓库 在 build.gradl

  • Highcharts iOS 是官方发布的 iOS 扩展包,可以很方便的在 iOS 开发过程中使用 Highcharts 创建多点触控的交互性图表。 API 文档 地址:API 文档 开始 接下来,以一个示例项目的创建简单介绍一下 Highcharts iOS 的基本使用方法。 步骤 创建 iOS 项目 使用 Highcharts 在 view 中创建图表 view 创建图表配置并添加到图表 vi

  • Highcharts Angular 是我们基于 Angular 框架封装的 Highcharts,可以很方便的在 Angular 开发环境中使用 Highcharts 创建交互性图表。 开发环境 确保您的 node, NPM, Angular 已经更新到最新版本。以下是经过测试和要求的版本: node 6.10.2+ npm 4.6.1+ @angular/cli 6.0.0+ Highchar

  • Highcharts React 是我们基于 React 框架封装的 Highcharts,可以很方便的在 React 开发环境中使用 Highcharts 创建交互性图表。 开发环境 确保您的 node, NPM, React 已经更新到最新版本。以下是经过测试和要求的版本: node 8.11.3+ npm 6.4.1+ 或者类似的包管理工具 React 16.4+ Highcharts Re