First, Labels Property description
The Labels property allows you to add arbitrary HTML code anywhere in the Highcharts chart. A number of customizations can be implemented.
Second, labels attribute detailed
Parameters |
Sub-parameters |
Description |
Default Value |
Items |
—- |
An HTML tag |
—- |
—- |
Html |
HTML code |
“” |
—- |
Style |
Label location (only location, other CSS not) |
Style: { Left: ' 100px ', Top: ' 100px ' } |
Style |
—- |
The color of the label (this style differs from the style in items) |
Style: { Color: ' #3E576F ' } |
Iii. Description of the case
<meta Http-equiv="Content-type" Content="Text/html; Charset=utf-8 "> <script Type="Text/javascript" Src="Js/jquery.min.js"></script> <script Type="Text/javascript">$(function () { VarChart;$(Document).Ready(function() {Chart= New Highcharts.Chart({Chart: {Renderto: ' Container ',Type: ' Areaspline ', },Credits: {Enabled:FalseDo not display highcharts copyright information },Labels:{Items:[{ Tag code (HTML code)Html:' <p style= ' font-size:20 ">copyright©2012-2013 </p><a href=" http://www.52wulian.org "style=" font-size : 20;text-decoration:underline; " > I love Internet of things </a> ',Style:{ Set Label positionLeft:' 100px ',Top:' 50px ', } }],Style:{ Set Label colorColor:' RGB (0,0,255) ' } },Xaxis: {Categories: [' 2011-11 ',' 2011-12 ',' 2012-01 ',' 2012-02 ',' 2012-03 '] },Series: [{Name: ' Series1 ',Data: [2,4,5,9,2] },{Name:' Series2 ',Data:[3,5,7,2,1] }] }); }); }); </script> <body> <script Src="Js/highcharts.js"></script> <script Src="Js/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">< /div> </body>
Four, the effect
Online Demo demo Address: http://www.52wulian.org/test/HighCharts/highcharts_2_6_labels.html vi. Resources Download This example source file: http://pan.baidu.com/ share/link?shareid=248660&uk=3087605183
"Highcharts Series tutorial" Eight, HTML tag properties--labels