温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在jQuery中使用HighCharts绘制一个2D折线图

发布时间:2021-04-12 16:53:56 阅读:175 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

今天就跟大家聊聊有关怎么在jQuery中使用HighCharts绘制一个2D折线图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1、实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D折线图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
   $(function(){
     $('#lineChart').highcharts({
       chart: {
         type'line'
       },
       title: {
         text'(jb51.net统计)2013年月收入'
       },
       subtitle: {
         text'月收入'
       },
       xAxis: {
         categories: [
           '一月',
           '二月',
           '三月',
           '四月',
           '五月',
           '六月',
           '七月',
           '八月',
           '九月',
           '十月',
           '十一月',
           '十二月'
         ]
       },
       yAxis: {
         min0,
         title: {
           text'收入 (¥)'
         }
       },
       tooltip: {
         headerFormat'<span >{point.key}</span><table>',
         pointFormat'<tr><td >{series.name}: </td>' +
           '<td ><b>{point.y:.1f} 元</b></td></tr>',
         footerFormat'</table>',
         sharedtrue,
         useHTMLtrue
       },
       plotOptions: {
         column: {
           pointPadding0.2,
           borderWidth0
         }
       },
       series: [{
         name'张三',
         data: [499571691064729224404545654595641245451265234514]
       }, {
         name'李思',
         data: [836123544512235645156451986554558254656269452356]
       }, {
         name'王武',
         data: [451295656564265232651202784598452356784454246312]
       }, {
         name'赵六',
         data: [652389566531653298644552956478456523451289562356]
       }]
     });
   });
</script>
</head>
<body>
  <div id="lineChart" ></div>
</body>
</html>

看完上述内容,你们对怎么在jQuery中使用HighCharts绘制一个2D折线图有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×