如何使用angle5的highcharts？

18

你也可以試試angular2-highcharts我實現了。

來源

2016-03-05 20:37:17

+1

你有使用angular2-highcharts用餅圖的任何例子嗎？謝謝 –

+0

它只是一個Highcharts的包裝。採用自述文件中的任何示例並更改highcharts配置 –

+0

我嘗試使用plunker上的樣條示例來創建衡量圖表。 http://plnkr.co/edit/OQSFSKisIIWAH0megy4d?p=preview。不工作。錯誤是我需要highcharts-more.js。我必須參考highcharts - 更多的地方？ – user2347528

10

我認爲你可以試試ng2-highchart（https://github.com/Bigous/ng2-highcharts）。

請參閱此項目的使用示例：https://github.com/Bigous/angular2-seed-ng2-highcharts。

如何將其設置在SystemJS配置：https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/index.html#L43和https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/tools/config.ts#L108
```
<script> 
    System.config({ 
    map: { 
     'ng2-highchart': 'node_modules/ng2-highchart' 
    }, 
    (...) 
    }); 
</script> 
```

如何在組件中進行配置：https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.ts#L10

import {Component, OnInit} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts'; 

@Component({ 
    selector: 'home', 
    moduleId: module.id, 
    templateUrl: './home.html', 
    styleUrls: ['./home.css'], 
    directives: [Ng2Highcharts, Ng2Highmaps, Ng2Highstocks] 
}) 
export class HomeCmp implements OnInit { 
    (...) 
}

如何內使用組件模板：https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.html#L9
```
<div [ng2-highcharts]="chartOptions" class="graph"></div> 
```

來源

2016-03-01 10:06:40

+0

你的鏈接已被打破 –

4

PrimeNG圖表可以替代。 http://www.primefaces.org/primeng/

來源

2016-03-01 17:13:16

11

我知道這個問題有點陳舊，但是它是angular2 + highcharts查詢的第一個命中之一......這是非常簡單直接的工作。這是一個蹲下的例子，https://plnkr.co/edit/8ccBrP?p=preview。

這裏是主要的邏輯：

import { 
    Component, 
    ElementRef, 
    AfterViewInit, 
    OnDestroy, 
    ViewChild 
} from '@angular/core'; 

const Highcharts = require('highcharts/highcharts.src'); 
import 'highcharts/adapters/standalone-framework.src'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
      <div #chart></div> 
     </div> 
    ` 
}) 
export class AppComponent implements AfterViewInit, OnDestroy { 
    @ViewChild('chart') public chartEl: ElementRef; 

    private _chart: any; 

    public ngAfterViewInit() { 
    let opts: any = { 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [ 
       7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 
       26.5, 23.3, 18.3, 13.9, 9.6 
      ] 
     }] 
    }; 

    if (this.chartEl && this.chartEl.nativeElement) { 
     opts.chart = { 
      type: 'line', 
      renderTo: this.chartEl.nativeElement 
     }; 

     this._chart = new Highcharts.Chart(opts); 
    } 
    } 

    public ngOnDestroy() { 
    this._chart.destroy(); 
    } 
}

來源

2016-09-08 16:21:27 roto

+0

非常感謝。這真的很有幫助。簡單而直接。 – user3294438

+0

plunkr無法在chrome中工作 – crh225

+0

@ crh225看起來zone.js版本與angular的更高版本不兼容。這裏是一個更新的plunkr（我的結尾沒有代碼變化）：https://plnkr.co/edit/8ccBrP?p=preview – roto

4

已將此添加的package.json：

"angular2-highcharts": "^0.3.3", 
"highcharts": "^5.0.0",

添加了這個上main.module.ts文件：

import { ChartModule } from 'angular2-highcharts';

添加了此在@NgModule中的main.module.ts上輸入部分

imports: [ // import Angular's modules  
    ChartModule 
],

添加這vendor.ts文件：

//Angular2-highcharts 
import { Highcharts } from 'angular2-highcharts'; 
require('highcharts/highcharts-more')(Highcharts); 
require('highcharts/modules/solid-gauge')(Highcharts);

添加本就chart.component.ts文件

import { Highcharts } from 'angular2-highcharts';

聲明此對chart.component類代碼裏面：

options: HighchartsOptions; 
chartData: any = [];

在將數據綁定到圖表的方法中添加此代碼：

this.options = { 
     chart: { type: 'spline' }, 
     title : { text : 'chart' }, 
     xAxis: { 
      type: 'datetime' 
     }, 
     series: [{ 
     name: "name", 
     data: this.chartData 
     }] 
    };

加入這個chart.component.html頁：

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

來源

2016-11-17 21:32:04 user2347528

+0

'從'angular2-highcharts'導入{Highcharts};'=>模塊沒有導出成員'Highcharts' – user776686

3

嘗試，而不需要第三方庫的這種做法。

import {Component} from 'angular2/core'; 

declare var jQuery:any; 

@Component({ 
    selector: 'my-chart', 
    template: `<div style="width:60%" id="container"></div>` 
}) 
export class AppComponent { 
    private data = [ 
      { 
       name: 'USA', 
       data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 
        1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 
        27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 
        26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 
        24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 
        22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 
        10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104] 
      }, 
      { 
       name: 'USSR/Russia', 
       data: [null, null, null, null, null, null, null, null, null, null, 
        5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 
        4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 
        15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 
        33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 
        35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 
        21000, 20000, 19000, 18000, 18000, 17000, 16000] 
      }]; 

    ngAfterViewInit() { 
     this.renderChart(); 
    } 

    renderChart(){ 
     jQuery('#container').highcharts({ 
      chart: { 
       type: 'area' 
      }, 
      title: { 
       text: 'US and USSR nuclear stockpiles' 
      }, 
      subtitle: { 
       text: 'Source: thebulletin.metapress.com' 
      }, 
      xAxis: { 
       allowDecimals: false, 
       labels: { 
        formatter: function() { 
         return this.value; 
        } 
       } 
      }, 
      yAxis: { 
       title: { 
        text: 'Nuclear weapon states' 
       }, 
       labels: { 
        formatter: function() { 
         return this.value/1000 + 'k'; 
        } 
       } 
      }, 
      tooltip: { 
       pointFormat: '{series.name} produced <b>{point.y:,.0f}</b>' + 
          '<br/>warheads in {point.x}' 
      }, 
      plotOptions: { 
       area: { 
        pointStart: 1940, 
        marker: { 
         enabled: false, 
         symbol: 'circle', 
         radius: 2, 
         states: { 
          hover: { 
           enabled: true 
          } 
         } 
        } 
       } 
      }, 
      series: this.data 
     }); 
    } 
}

放下這INDEX.HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script>

或者試試這個模塊http://ngmodules.org/modules/angular2-highcharts，如果你需要處理的點選擇的事件。

來源

2017-04-19 19:40:38 user321

1

要安裝此庫，先安裝同行的依賴關係：

$ npm install --save [email protected]^4.2.1

此外，請確保您安裝Highcharts的分型：

$ npm install @types/highcharts --save

然後，安裝這個庫運行：

$ npm install --save ng2-highcharts

app.module

import { Ng2HighchartsModule } from 'ng2-highcharts'; 

add Ng2HighchartsModule to @NgModule => imports

角CLI中添加這個JS文件腳本

"../node_modules/highcharts/highcharts.js", 
    "../node_modules/highcharts/highcharts-more.js", 
    "../node_modules/highcharts/modules/exporting.js"

組件文件

import { Ng2Highcharts } from 'ng2-highcharts'; 


private chartData = { 
chart: { 
    type: 'column' 
}, 
xAxis: { 
    categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
}, 
series: [ 
    { 
    name: 'NC', 
    data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2] 
    }, { 
    name: 'OK', 
    data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2] 
    }, { 
    name: 'KO', 
    data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2] 
    }, { 
    name: 'VALID', 
    data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2] 
    }, { 
    name: 'CHECK', 
    data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2] 
    }, { 
    name: 'COR', 
    data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2] 
    } 
]};

和HTML

<div [ng2-highcharts]="chartData"></div>

來源

2017-11-09 08:07:05

如何使用angle5的highcharts？

回答

相關問題