Comment utiliser correctement 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 de Highcharts

Recommandations associées :

HighCharts dessine en 2D partage d'exemples d'effet de graphique linéaire de bands Label

Explication détaillée de la façon de transférer dynamiquement des données vers des highcharts via php

PHP+mysql+Highcharts à implémenter diagramme circulaire _Tutoriel PHP

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!