Maison > interface Web > js tutoriel > Comment utiliser les highcharts en angulaire

Comment utiliser les highcharts en angulaire

小云云
Libérer: 2018-02-07 14:10:10
original
1759 Les gens l'ont consulté

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
Copier après la connexion

Introduire les dépendances


'highcharts/highcharts.src.js',
'highcharts-ng/dist/highcharts-ng.min.js'
Copier après la connexion

Injecter la dépendance


var myapp = angular.module('myapp', ["highcharts-ng"]);
Copier après la connexion

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]
 }]
};
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal