`
yang__yuan
  • 浏览: 28295 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类

highcharts实现曲线图，多曲线带滚动条（见附件截图）

highcharts滚动时间轴多曲线 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../common/taglibs.jspf"%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>电压曲线图</title>
 <link rel="stylesheet" type="text/css" href="../style/tabpage.css">
 <%@ include file="../common/jsFiles.jspf"%>
 <script type='text/javascript' src='../dwr/interface/remoteService.js'> </script>
 <script language="JavaScript" src="../script/calendar.js"></script>
 <script language="JavaScript" src="../report_jasper/JR.js"></script>
 <script type='text/javascript' src="../script/jquery.min.js"></script>
 <script language="JavaScript" src="../qy_lc_report/highstock.js"></script>
 <script>
$(function() {
 $('#container').highcharts({
  colors: ['yellow', 'green', 'red'], //曲线颜色
     
      chart: {
          type: 'line',   //尖锐的曲线， spline平滑的曲线
          backgroundColor:'black'   //背景颜色
      },
      title: {
          text: '三相电压曲线图'   //主标题
      },
      subtitle: {
          text: 'A、B、C三相电压在每个时间段内的电压曲线图'  //副标题
      },
  credits: {
   enabled: false  //设置右下角的标记
  },
  
  xAxis: {
   categories: ['2014/10/52 8:00:00', '2014/10/52 8:01:00', '2014/10/52 8:02:00', '2014/10/52 8:03:00',
      '2014/10/52 8:04:00', '2014/10/52 8:05:00', '2014/10/52 8:06:00', '2014/10/52 8:07:00',
      '2014/10/52 8:08:00', '2014/10/52 8:09:00','2014/10/52 8:10:00','2014/10/52 8:11:00',
     
      '2014/10/52 8:12:00', '2014/10/52 8:13:00', '2014/10/52 8:14:00', '2014/10/52 8:15:00',
      '2014/10/52 8:16:00', '2014/10/52 8:17:00', '2014/10/52 8:18:00', '2014/10/52 8:19:00',
      '2014/10/52 8:20:00', '2014/10/52 8:21:00','2014/10/52 8:22:00','2014/10/52 8:23:00',
     
      '2014/10/52 8:24:00', '2014/10/52 8:25:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
     
       '2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
     
      '2014/10/52 8:24:00', '2014/10/52 8:25:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
     
       '2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
     
       '2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
     
      '2014/10/52 8:24:00', '2014/10/52 8:25:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
     
       '2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
      '2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
      '2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00'],
    labels:
      {
      step:30,
      enabled:true,
      rotation: 10,  //倾斜度
      align: 'left', //倾斜方向
      style: {
         font: 'normal 9px Verdana, sans-serif'   //设置字体
         }
      },   
             min:1
  },
  
  yAxis: {
   title: {
              text: '电压(V)'
             },
           min: 0,
           minorGridLineWidth: 0,
           gridLineWidth: 0,
           alternateGridColor: null,
           tickPositions: [-10,10,30,50,70,90,110,130,150,170,190,210,230,250,270,290,310,
                          330,350,370,390,410,430,450,470,490,510,530,550,570,590,610,630]  // 指定竖轴坐标点的值
     },
  tooltip: {
      crosshairs: true,
      shared: true,
            valueSuffix: 'V'
          },
  
  plotOptions: {
          line: {
              lineWidth: 1,
              states: {
                  hover: {
                      lineWidth: 1
                  }
              },
                 marker: {
                      radius: 0.09,
                      lineColor: '#ffffff',
                      lineWidth: 0.05
                  }
              }
          },       
             
  
  series: [{
        name: 'A相电压',
        data: [117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
          117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6]
    }, {
        name: 'B相电压',
        data: [-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
        -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
        -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
         -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
         -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
         -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
          -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
         -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
         -0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5]
    }, {
        name: 'C相电压',
        data: [-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
        -0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5]
    }],
  scrollbar: {
   enabled: true,
   barBackgroundColor: 'gray',
   barBorderRadius: 7,
   barBorderWidth: 0,
   buttonBackgroundColor: 'gray',
   buttonBorderWidth: 0,
   buttonArrowColor: 'yellow',
   buttonBorderRadius: 7,
   rifleColor: 'yellow',
   trackBackgroundColor: 'white',
   trackBorderWidth: 1,
   trackBorderColor: 'silver',
   trackBorderRadius: 7
  }

 });
});  
</script>
</head>
<body class="body"> 
<div  id="container" style="width:100%;height:100%;"></div>
</body>
</html>    

  • 大小: 87.9 KB
分享到：
| highcharts实现曲线图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Highcharts 构建曲线图

    Highcharts是一款强大的JavaScript图表库，用于在Web应用中创建各种数据可视化效果，包括曲线图、柱状图、饼图等。在这个"Highcharts构建曲线图"的实例中，我们将深入探讨如何利用Highcharts来绘制一个基本的曲线图...

    highcharts加载多条曲线数据

    在"highcharts加载多条曲线数据"的场景下，我们通常指的是在一个图表中同时展示多组数据，每组数据表现为一条曲线，这样可以更直观地对比和分析不同数据系列的变化趋势。 首先，我们需要引入Highcharts库和jQuery库...

    highcharts实现雷达图效果

    Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种类型的图表，包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中，雷达图常用于展示多维数据，每个轴代表一个特性或指标，数据点则...

    highcharts.js实现曲线图、柱状图、面积图等

    Highcharts.js是一款强大的JavaScript图表库，它允许开发者轻松地在网页上创建各种动态、交互式的图表，包括曲线图、柱状图、面积图等多种图表类型。这个库以其易用性、灵活性和丰富的定制选项而受到广泛欢迎。在...

    Java和Highcharts实现折线图

    在这个场景中，我们将探讨如何使用Java和Highcharts这两个工具来实现一个动态的、交互式的折线图。Highcharts是一个流行的JavaScript库，专门用于创建高质量的图表，而Java则作为后端语言，负责处理数据并将其传递给...

    highcharts曲线图，饼状图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，包括曲线图和饼状图。这个库以其简洁的API、强大的自定义能力和跨浏览器兼容性而受到欢迎。在本文中，...

    Highcharts动态实现曲线图和饼型图的展示

    在本文中，我们将深入探讨如何使用Highcharts动态实现曲线图和饼型图的展示。 首先，为了使用Highcharts，你需要在客户端的HTML页面中引入必要的JavaScript文件。如描述所示，这通常包括`highcharts.js`主文件，...

    jsp实现，登录，插入，查询oracle数据可视化看板,数据区域实现隐藏滚动条，但有滚动效果，图表利用highcharts控件

    在本项目中，我们主要关注的是使用JSP技术来实现用户登录、数据插入与查询功能，并结合Oracle数据库和Highcharts库来创建一个数据可视化看板。以下是对这些知识点的详细说明： 1. **JSP（JavaServer Pages）**：JSP...

    highcharts曲线图

    总的来说，实现"highcharts曲线图"并从本地TXT文件实时读取数据，涉及到前端开发中的文件操作、数据解析、图表渲染等多个技术点。理解并掌握这些知识，可以帮助开发者创建出功能丰富且交互性强的数据可视化应用。

    Highcharts实现图形报表

    在本项目中，“Highcharts实现图形报表”旨在利用Highcharts的功能，构建出各种类型的柱状图表，包括对比图、级别图和单一柱形图，以满足数据分析和展示的需求。 首先，我们要了解Highcharts的基本用法。在HTML页面...

    强大的highcharts插件曲线图(类似股票曲线图)

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种类型的交互式图表，包括折线图、柱状图、饼图、散点图等，而且非常适合用来绘制类似股票曲线图的动态数据展示。这个插件以其...

    highcharts实现从mysql数据库获取数据生成折线图

    本篇将详细介绍如何利用Highcharts结合MySQL数据库，实现在Web应用中动态生成折线图。 首先，我们需要了解Highcharts的基本使用。Highcharts是一个轻量级的图表库，它提供了丰富的API和配置选项，可以自定义图表...

    Highcharts饼状图 柱状图 曲线图

    Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种数据可视化效果，包括饼状图、柱状图和曲线图。这些图表类型是数据分析和展示的常用工具，可以帮助用户直观理解大量复杂数据。 饼状图在数据可视...

    Highcharts多个图表共用一个提示框,每个图表多条曲线

    在这个特定的场景中，我们关注的是如何实现"Highcharts多个图表共用一个提示框，每个图表多条曲线"的功能。这通常涉及到对Highcharts API的深入理解和定制。 首先，我们要理解Highcharts的提示框（tooltip）是用于...

    Highcharts动态曲线图(使用jna监视cpu使用率)

    在这个实例中，我们将关注如何使用Highcharts创建动态曲线图，并结合Java Native Access (JNA)库来实时监控CPU的使用率。 动态曲线图是一种能够实时更新数据的图表，常用于展示随时间变化的趋势。在Highcharts中，...

    android 曲线图highchartdemo

    在Android开发中，有时我们需要展示数据的动态变化或者复杂的数据关系，这时曲线图就成为了一个很好的选择。Highcharts是一款强大的JavaScript图表库，它能够轻松创建各种类型的图表，包括折线图、柱状图、饼图等。...

    highCharts-时序图

    在"时序图"这个场景中，HighCharts被用来展示实时更新的数据，就像心电图一样连续不断地展示时间序列信息。这种类型的图表对于监控动态变化的数据非常有用，比如在金融市场的股票价格跟踪、物联网设备的状态监测或者...

    用QWebEngineView呈现HighCharts图形，并实现曲线的拖拽

    在IT领域，尤其是在数据可视化和用户交互设计中，HighCharts是一个广泛应用的JavaScript库，它能够创建各种复杂的图表，如折线图、柱状图、饼图等。而Qt框架中的QWebEngineView组件则是一个强大的工具，用于在C++...

    Vue 中使用vue2-highcharts实现曲线数据展示的方法

    "Vue 中使用vue2-highcharts实现曲线数据展示的方法" 在本文中，我们将介绍如何使用Vue框架和vue2-highcharts库来实现曲线数据展示的方法。通过本文，读者可以学习如何使用vue2-highcharts来创建一个简单的曲线图表...

Magicbox
Global site tag (gtag.js) - Google Analytics