Wie man Highcharts in Angular richtig nutzt

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Highcharts vorgestellt. Er ist von großem praktischem Wert und kann allen helfen.

Abhängigkeiten installieren

npm install highcharts-ng --save

Abhängigkeiten einführen

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

Abhängigkeit injizieren

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

Instanz

// 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]
 }]
};

Ergebnis

Grundlegende Zusammensetzung von Highcharts

Verwandte Empfehlungen:

HighCharts zeichnet 2D Bands Labels Liniendiagramm-Effekt-Beispielfreigabe

Ausführliche Erklärung, wie Daten dynamisch über PHP an Highcharts übertragen werden

PHP+MySQL+Highcharts zur Implementierung Kreisdiagramm _PHP-Tutorial

Das obige ist der detaillierte Inhalt vonWie man Highcharts in Angular richtig nutzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!