Home > Web Front-end > JS Tutorial > How to use highcharts correctly in angular

How to use highcharts correctly in angular

小云云
Release: 2018-02-05 10:34:33
Original
1804 people have browsed it

This article mainly introduces to you the sample code for using highcharts in angular. It is of great practical value. Friends who need it can refer to it. I hope it can help everyone.

Install dependencies


##

npm install highcharts-ng --save
Copy after login

Introduce dependencies


##

'highcharts/highcharts.src.js',
'highcharts-ng/dist/highcharts-ng.min.js'
Copy after login

Inject dependencies


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

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]
 }]
};
Copy after login

Result

Basic composition of Highcharts

Related recommendations:


HighCharts drawing 2D line chart with Label effect example sharing

Detailed explanation on how to dynamically transfer data to highcharts through php

PHP+mysql+Highcharts to implement pie chart_PHP tutorial

The above is the detailed content of How to use highcharts correctly in angular. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template