编程 Javascript

jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】

Posted in Javascript onMarch 07, 2017

本文实例讲述了jQuery插件HighCharts绘制的基本折线图效果。分享给大家供大家参考，具体如下：

1、实例源码：

<!DOCTYPE html>
<html>
  <head>
    <title>HighCharts基本折线图</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <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({
          title: {
            text: '( 3water.com统计 )月平均温度',
            x: -20 //center
          },
          subtitle: {
            text: '省级',
            x: -20
          },
          xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            title: {
              text: '温度 (°C)'
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          tooltip: {
            valueSuffix: '°C'
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            backgroundColor:'#CCCCCC',
            borderWidth: 2
          },
          series: [{
            name: '湖南',
            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: '湖北',
            data: [-2.8, 0.8, 5.7, 11.3, 17.0, 36.0, 30.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
            name: '广东',
            data: [-1.9, 0.6, 3.5, 8.4, 13.5, 25.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
            name: '广西',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 34.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]
        });
      });
    </script>
  </head>
  <body>
    <div id="lineChart" style="min-width:700px;height:480px"></div>
  </body>
</html>

2、运行效果图：

jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Mozilla 表达式 __noSuchMethod__

Apr 05 Javascript

获取下拉列表框的值是数组，split，$.inArray示例

Nov 13 Javascript

javascript:json数据的页面绑定示例代码

Jan 26 Javascript

AngularJS 使用$sce控制代码安全检查

Jan 05 Javascript

js清除浏览器缓存的几种方法

Mar 15 Javascript

详解AngularJS ui-sref的简单使用

Apr 24 Javascript

微信小程序网络请求wx.request详解及实例

May 18 Javascript

js实现图片懒加载效果

Jul 17 Javascript

JSON的parse()方法介绍

Jan 31 Javascript

浅谈Webpack多页应用HMR卡住问题

Apr 24 Javascript

webpack 如何解析代码模块路径的实现

Sep 04 Javascript

JS实现九宫格拼图游戏

Jun 28 Javascript

Bootstrap进度条实现代码解析

Mar 07 #Javascript

JQuery实现文字无缝滚动效果示例代码(Marquee插件)

Mar 07 #Javascript

JavaScript实现向select下拉框中添加和删除元素的方法

Mar 07 #Javascript

js仿网易表单及时验证功能

Mar 07 #Javascript

JS完成画圆圈的小球

Mar 07 #Javascript

jQuery Chosen通用初始化

Mar 07 #Javascript

jQuery动态移除和添加背景图片的方法详解

Mar 07 #Javascript