Comment utiliser les highcharts en angulaire

Cet article présente principalement l'exemple de code pour utiliser les highcharts en angulaire. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Installer les dépendances

npm install highcharts-ng --save

Introduire les dépendances

'highcharts/highcharts.src.js',
'highcharts-ng/dist/highcharts-ng.min.js'

Injecter la dépendance

var myapp = angular.module('myapp', ["highcharts-ng"]);

Instance

// html
<highchart class="chart" config="chartConfig" class="span9" ></highchart>

// js
$scope.chartConfig = {
 title: {
   text: &#39;哈哈哈&#39;,
   x: -20
 },
 subtitle: {
  text: &#39;Click and drag to zoom in.&#39;,
  x: -20
 },
 xAxis: {
  categories: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
 },
 yAxis: {
  title: {
   text: &#39;温度 (°C)&#39;
  },
  plotLines: [{
   value: 0,
   width: 1,
   color: &#39;#808080&#39;
  }]
 },
 tooltip: {
  valueSuffix: &#39;°C&#39;
 },
 legend: {
  layout: &#39;vertical&#39;,
  align: &#39;right&#39;,
  verticalAlign: &#39;middle&#39;,
  borderWidth: 0
 },
 series: [{
  name: &#39;东京&#39;,
  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]
 }, {
  name: &#39;纽约&#39;,
  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
 }, {
  name: &#39;柏林&#39;,
  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
 }, {
  name: &#39;伦敦&#39;,
  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
 }]
};

Résultat

Composition de base des Highcharts

Recommandations associées :

Différents composants dans angulaire Partage de valeurs indirectes et de méthodes de communication

Partage d'instance d'une certaine expérience d'utilisation du calendrier de l'interface utilisateur dans angulaire

Obtention de services intégrés en angulaire et en obtenant des natifs Méthode d'information

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!