这篇文章将为大家详细讲解有关Highcharts怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
Highcharts是一款功能非常强大的纯javascript类库,它主要为您的WEB应用提供丰富漂亮且可互动的图表。目前,Highcharts支持图表类型有折线图,曲线图、区域图、区域曲线图、柱状图、饼状图、散布图。
Highcharts无需像flash图表那样需要预先加载flash控件,因此它兼容几乎所有的浏览器,包括iphone以及老掉牙的IE6。Highcharts还提供丰富的参数配置,开发人员可以通过不同的配置生成各种图表。此外,Highcharts还支持图表导出,图表局部放大,图表提示、多图表共存等多种特性。
我们要先将jquery库以及highcharts图表库。
var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_line', //放置图表的DIV容器对应的id属性
defaultSeriesType: 'line' //图表类型line, spline, area, areaspline, column, bar, pie ,
scatter
},
title: {
text: '主要城市月平均气温', //图表标题
x: -20 //center
},
subtitle: {
text: '数据来源于网络', //副标题
x: -20
},
xAxis: { //x轴
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
'十月', '十一月', '十二月']
},
yAxis: { //y轴
title: {
text: '平均气温(°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() { //当鼠标悬置数据点时的格式化提示
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
}
},
legend: { //【图例】位置样式
layout: 'vertical', //【图例】显示的样式:水平(horizontal)/垂直(vertical)
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
series: [{
name: '北京',
data: [ - 4.6, -2.2, 4.5, 13.1, 19.8, 24.0, 25.8, 24.4, 19.3, 12.4, 4.1, -2.7]
},
{
name: '上海',
data: [3.5, 4.6, 8.3, 14.0, 18.8, 23.3, 27.8, 27.7, 23.6, 18.1, 12.2, 6.2]
},
{
name: '长沙',
data: [4.7, 6.2, 10.9, 16.8, 21.6, 25.9, 29.3, 28.7, 24.3, 19.0, 12.5, 7.0]
},
{
name: '广州',
data: [13.3, 14.4, 17.7, 21.9, 24.6, 27.2, 30.8, 32.1, 27.2, 23.7, 21.3, 15.6]
}]
});
});
这样,就可以生成一个漂亮的线状图表了。
关于“Highcharts怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前题目:Highcharts怎么用-创新互联
浏览地址:https://www.cdcxhl.com/article8/epdip.html
成都网站建设公司_创新互联,为您提供做网站、企业网站制作、网站维护、App设计、网站建设、云服务器
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联