其他分享
首页 > 其他分享> > Highcharts 曲线图简单实例带注释

Highcharts 曲线图简单实例带注释

作者:互联网

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 曲线图</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

var title = {

text: '城市平均气温'

};

var subtitle = {

text: ''

};

var xAxis = {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

};

var yAxis = {

title: {

text: 'Temperature (\xB0C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

};

// 数据提示框

var tooltip={

         backgroundColor: {

linearGradient: [0, 0, 0, 60],

            stops: [

               [0, '#FFFFFF'],

[1, '#20b2aa']

]

         },

borderWidth: 1,

borderRadius: 10,

shadow: true, // 是否显示阴影

animation: true, // 是否启用动画效果

style: { // 文字内容相关样式

color: "#ff0000",

fontSize: "12px",

fontWeight: "blod",

fontFamily: "Courir new"

}

         // borderColor: '#AAA'//不设置则跟随折线颜色

      };

 

var legend = {

layout: 'vertical',

align: 'right',

verticalAlign: 'middle',

borderWidth: 0

};

 

var series = [

{

name: 'Tokyo',

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: 'New York',

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: 'London',

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]

}

];

 

var json = {};

 

json.title = title;

json.subtitle = subtitle;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.tooltip = tooltip;

json.legend = legend;

json.series = series;

 

$('#container').highcharts(json);

});

</script>

</body>

</html>

标签:name,曲线图,title,text,yAxis,json,实例,var,Highcharts
来源: https://blog.csdn.net/weixin_42065612/article/details/88953140