美洲杯赌球Highcharts使用指南

2019-07-06 09:11 来源:未知

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>

[javascript]   
 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表。

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
  //x轴值
  var categories=<%=categories%>;

一、前言(Preface)
Highcharts是一个非常流行,界面美观的纯Javascript图表库。它主要包括两个部分:Highcharts和Highstock。
Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。
 二、安装(Installation)
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。因此,在使用Highcharts之前,需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架,那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。如下:
[javascript]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script src="/js/highcharts.js" type="text/javascript"></script> 
Highcharts(Highstock)已经内置了jQuery适配器(adapter)(注:可能是jQuery框架最流行的缘故),但是并没有内置MooTool等其他javascript框架的适配器(adapter)。因此,当我们使用MooTool等其他JS框架时,需要单独引用适配器(adapter)脚本文件。如下:
[javascript] 
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script> 
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script> 
<script src="/js/highcharts.js" type="text/javascript"></script> 
2.在您的网页头部的脚本标签,或在一个单独的js文件,添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置,一般来说是一个具有ID的DIV元素(参考第3步)。
[css]
var chart1; // 全局变量 
$(document).ready(function() { 
      chart1 = new Highcharts.Chart({ 
         chart: { 
            renderTo: 'container', 
            type: 'bar' 
         }, 
         title: { 
            text: 'Fruit Consumption' 
         }, 
         xAxis: { 
            categories: ['Apples', 'Bananas', 'Oranges'] 
         }, 
         yAxis: { 
            title: { 
               text: 'Fruit eaten' 
            } 
         }, 
         series: [{ 
            name: 'Jane', 
            data: [1, 0, 4] 
         }, { 
            name: 'John', 
            data: [5, 7, 3] 
         }] 
      }); 
   }); 
上述代码适用于使用jQuery作为基本框架的情况,$(document).ready()函数,表示在文档加载完成后进行相应处理。如果你使用MooTool等其他JS框架,需要使用相对应的代码来替代$(document).ready()函数。
如果你想生成HighStock图表,有一个单独的构造方法调用Highcharts.StockChart。在这些图表中,数据源是一个典型的JavaScript数组数据。其来源可以是一个单独的JavaScript文件,或者是通过Ajax调用远程服务器提供的数据。
[javascript] 
var chart1; // 全局变量 
$(document).ready(function() { 
      chart1 = new Highcharts.StockChart({ 
         chart: { 
            renderTo: 'container' 
         }, 
         rangeSelector: { 
            selected: 1 
         }, 
         series: [{ 
            name: 'USD to EUR', 
            data: usdtoeur // 数组变量 
         }] 
      }); 
   }); 
3.在页面中添加一个DIV元素,作为放置Highcharts图表的容器。需要为其设置ID值,与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。
[html] view plaincopyprint?
<div id="container" style="width: 100%; height: 400px"></div> 
4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题(可选的)。下载包含有四个预定义的主题,如果你需要使用从这些主题,只需在 highcharts.js 后引用这些文件。比如:
[html] view plaincopyprint?
<script type="text/javascript" src="/js/themes/gray.js"></script> 
三、如何设置参数(How to set up the options)
Highcharts使用一个JavaScript对象结构来定义参数。选项的值可以是字符串和数字,数组,其他对象,甚至是函数。当您初始化使用新Highcharts.Chart的图表,options对象将作为第一个参数传递。

  //y轴值
  var data=<%=data%>;
    
  //创建图表
  var chart;
  $(document).ready(function() {
   chart = new Highcharts.Chart( {
    chart : {
     renderTo : 'container',
     type : 'bar',
     events : {
      load : st// 定时器
     }
    },
    title : {
     text : '动物数量统计'
    },
    xAxis : { 
     categories : categories,
     title : {
      text : 'name'
     }
     
    },
    yAxis : {
     min : 0,
     title : {
      text : 'number'
     }
    },
          legend: {
              enabled: false
          },
    tooltip : {
     formatter : function() {
      return '' this.series.name ': ' this.y '';
     }
    },
          credits : {
              enabled: false
          },
    plotOptions : {
     series : {
      stacking : 'normal'
     }
    }, 
    series : [ {
     name : '个',
     data : data
    } ]
   });
   
   
  });

如果你想在同一个页面上使用一组参数,可以定义一个选项对象(options object)来设置选项。更多内容参考#4预处理选项(Preprocessing the options)。
四、预处理参数(Preprocess the options)
了解配置对象(configuration object)的工作原理,以及如何用程序来实现,对于实现高效的Highcharts图表显得十分重要。下面将介绍JavaScript对象的基本知识点:
在上面的例子中,Highcharts options被定义为对象字面值(object literals)。通过这种方法来标记配置,我们可以的到一个清晰的,可读性强的,占用空间低的配置对象。下面这种复杂的代码对于C程序员来说可能比较熟悉:
[javascript] 
// 不良的风格 
var options = new Object(); 
 
options.chart = new Object(); 
options.chart.renderTo = 'container'; 
options.chart.type = 'bar'; 
 
options.series = new Array(); 
options.series[0] = new Object(); 
options.series[0].name = 'Jane'; 
options.series[0].data = new Array(1, 0, 4); 
对于JavaScript程序员来说,我们更喜欢使用下面的风格。需要注意的是,两种实现方式的结果是完全相同的。
[javascript] view plaincopyprint?
// 良好的风格 
var options = { 
    chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'bar' 
    }, 
    series: [{ 
        name: 'Jane', 
        data: [1, 0, 4] 
    }] 
}; 
在创建命名的对象后,我们可以通过.操作符来扩展其成员。假设我们已经定义一个对象(见良好的风格代码)。下面代码代码将添加另一个series。请记住options.series是一个数组,因此我们可以使用push方法。
[javascript] 
options.series.push({ 
    name: 'John', 
    data: [3, 4, 2] 
}) 

  //10秒钟刷新一次数据
  function st() {
   setInterval("getData()", 10000);
  }

另外一个可以排上用场的事实是,对于JavsScript对象来说,点符号(.)和方括号[]是等价的。所以,你可以通过名称来访问成员。这意味着:

  //动态更新图表数据
  function getData() {
   
   var categories = [];
   $.ajax({
      type: "post",
      url: "${pageContext.request.contextPath}/demo/chart_demo.action",    
      dataType: "json",
      success : function(data){
     var d = [];
       $(data).each(function(n,item){
        d.push(item.data);
        categories.push(item.categories);
       })
      chart.series[0].setData(d);
      chart.xAxis[0].setCategories(categories);
      }
    });
  }

options.renderTo

  </script>
 </head>
 <body>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/funnel.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts-more.js"></script>

等价于

TAG标签:
版权声明:本文由美洲杯赌球发布于计算机教程,转载请注明出处:美洲杯赌球Highcharts使用指南