澳门新萄京8522HighCharts -教程+例子

用PHP达成职业级的依照Web的图片,而没有必要浓重的HTML5和JavaScript知识。

倘使你想在同四个页面上应用一组参数,能够定义三个抉择对象(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] 
}) 

澳门新萄京8522 1

您大概感兴趣的篇章:

  • 纯JAVASC劲客IPT图表动漫插件Highcharts Examples
  • Highcharts 非常实用的Javascript总计图demo示例
  • JQuery Highcharts 动态生成图表的艺术
  • 浅析jquery的js图表组件highcharts
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • PHP+mysql+Highcharts生成饼状图
  • HighCharts图表控件在ASP.NET WebForm中的使用计算(全)

Highcharts 是一个用纯JavaScript编写的叁个图表库,
能够非常粗略方便的在web网址或是web应用…

数组和命名约定

那边还或然有局地值得注意之处。首先,phpChart函数中动用的大致具有参数是一个数组,不是全体,但差了一点全体的都以。只需记住这点,就会防止调节和测量试验时的多量讨厌难题(前面笔者将简要地覆盖调节和测量检验功效)。其次,渲染器在phpChart中被称呼“插件”,故而你必须要像那样传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

1 var chart; // global

Highchart简介:

Highcharts使用简例及异步动态读取数据,highcharts异步

Highcharts 是八个用纯JavaScript编写的三个图表库,
能够超级轻易方便的在web网站或是web应用程序增多有人机联作性的图样,况且无需付费提要求个体学习、个人网址和非商业用项使用。HighCharts扶持的图片类型有曲线图、区域图、柱状图、饼状图、散状点图和总结图表。

先是有的:在head之间加载五个JS库。

<script src="html/js/jquery.js"></script>
<script src="html/js/chart/highcharts.js"></script> 

可以到 下载,有连带学科和利用表达文书档案。

匈牙利(Magyarország卡塔尔(قطر‎语好的能够去官方网址:

其次部分:JS代码

//定义一个Highcharts的变量,初始值为null
var oChart = null;
//定义oChart的布局环境
//布局环境组成:X轴、Y轴、数据显示、图标标题
var oOptions = { 
 //设置图表关联显示块和图形样式
 chart: { 
  renderTo: 'container', //设置显示的页面块
  //type:'line'    //设置显示的方式
  type: 'column'
 },
 //图标标题
 title: { 
  text: '图表展示范例', //设置标题
  //text: null, //设置null则不显示标题
 },
 //x轴
 xAxis: {
  title: {
   text: 'X 轴 标 题'
  },
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 },
 //y轴
 yAxis: {
  title: { text: 'Y 轴 标 题' }, //设置Y轴标题关闭
 },
 //数据列
 series: [{
  data:[120,360,560,60,360,160,40,360,60,230,230,300]
  }] 
}; 
$(document).ready(function(){
 oChart = new Highcharts.Chart(oOptions);
 //异步添加第2条数据列
 LoadSerie_Ajax();
}); 
//异步读取数据并加载到图表
function LoadSerie_Ajax() { 
  oChart.showLoading(); 
  $.ajax({ 
   url : 'ajax/get_value.aspx',
   type : 'POST',
   dataType : 'json',
   async : false, //同步处理后面才能处理新添加的series
   contentType: "application/x-www-form-urlencoded; charset=utf-8", 
   success : function(rntData){
     var oSeries = {
     name: "第二条",
     data: rntData.rows1
    };
    oChart.addSeries(oSeries);
   }
  });
  oChart.hideLoading(); 
} 

其三有的:C#代码

Response.Clear();
Response.Write("{\"rows1\":[10,20,30,40,50,200,70,100,90,200,100,60]}");
Response.End(); 
 输出的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]} 
 多条的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60],"rows2":[10,20,30,40,50,200,70,100,90,200,100,60]} 

第四片段:HTML页面代码

<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

上面给大家大饱眼福一段代码关于highcharts异步获取数据

页面异步代码

$(function () {
   var chart_validatestatics;
   $(document).ready(function () {
    var options_validatestatics = {
     chart: {
      renderTo: 'container_validatestatics',
      type: 'column'
     },
     title: {
      text: '验票分析'
     },
     subtitle: {
      text: 'tourol.cn'
     },
     xAxis: {
    },
    yAxis: {
     title: {
      text: '人数'
     }
    },
    plotOptions: {
     bar: {
      dataLabels: {
       enabled: true
      }
     }
    },
    tooltip: {
     formatter: function () {
      return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '人';
     }
    },
    credits: {
     enabled: false
    },
    series: [{
     name: "验票用户",
     width: 3
    }]
   }
   $.get("/ajaxhandler/dataupdate.ashx?operate_type=validatestatics", function (data) {
    var xatrnames = [];
    var yvalidators = [];
    for (var i = 0; i < data.rows.length; i++) {
     xatrnames.push([
       data.rows[i].atrname
      ]);
     yvalidators.push([
       data.rows[i].atrname,
       parseInt(data.rows[i].nums)
      ]);
    }
    alert(xatrnames + yvalidators);
    options_validatestatics.xAxis.categories = xatrnames
    options_validatestatics.series[0].data = yvalidators;
    chart_validatestatics = new Highcharts.Chart(options_validatestatics);
   });
  });
 }); 

此地要留意的是:x轴数组定义好后,定义y轴数据的时候要把对应在x轴上的值也push到数组里,不然会促成无法呈现的状态

对应的在ajaxhandler中,拼接字符串并赶回就可以

string json = "{\"rows\":[";
  for (int i = 0; i < datas.Rows.Count; i++)
  {
   json += "{\"atrname\":\"" + datas.Rows[i]["name"] + "\",\"nums\":\"" + datas.Rows[i]["nums"] + "\"},";
  }
  json = json.TrimEnd(',');
  json += "]}";
  context.Response.Write(json);
  context.Response.Flush();
  context.Response.End(); 

聊起底的商量

PhpChart的一个主要利润是,通过使用这些工具,PHP程序猿能够兑现职业级的基于Web的图样——而没有要求深切摸底HTML5和JavaScript知识。

假若您像笔者同样,也是前面二个编制程序的门外汉,但雷同须要生成人机联作式的Web图表,那么您可能会欣赏phpChart。关于phpChart的HTML5图纸例子已经全部地罗列到以下那几个页面中。运气好的话,你只怕并不要求文书档案——就能够一向驾驭代码。

4.1 案例学习: preprocessing the data from CSV
透过这一个大概的事例,大家将学会怎么着布署中央的参数(options卡塔尔国,然后通过一个Ajax调用长途数据以致深入剖判数据,最后通过适当的格式表现出来。在这一个例子中,大家应用jQuery来管理Ajax诉求。当然,你也足以运用MooTool也许Prototype来促成形似的功用。全数的代码在$(document卡塔尔国.ready(State of Qatar函数中拍卖。你能够在data-from-csv.htm见到那一个例子的效劳。
(1卡塔尔国创制叁个外表的仅包括数据的CSV文件(数据源)。从底下数据文件中,我们得以看到第一行列出了品种的称呼(相通于字段名)。后继的行的率先个任务列出了series
name(举例:第二行的’John’State of Qatar,随后的职位列出相关的值(valueState of Qatar。在实际支付进程中,大家平常利用PHP也许别的服务器端编制程序语言(C#,java等卡塔尔(قطر‎来创设那么些文件的内容。只怕您会筛选别的的标识格式,比较的大规模的如XML恐怕JSON(JSON相对XML越发轻松)。在这里些处境下,jQuery能够剖判出多少对象自己。
[css] 
Categories,Apples,Pears,Oranges,Bananas 
John,8,4,6,5 
Jane,3,4,2,3 
Joe,86,76,79,77 
Janet,3,16,13,15 
(2卡塔尔国定义基本的开端的参数。注意到,大家为categorys和series对象创造了空数组(empty
arrays),稍后我们得以为其丰硕数据。
[javascript] 
var options = { 
    chart: { 
        renderTo: ‘container’, 
        defaultSeriesType: ‘column’ 
    }, 
    title: { 
        text: ‘Fruit Consumption’ 
    }, 
    xAxis: { 
        categories: [] 
    }, 
    yAxis: { 
        title: { 
            text: ‘Units’ 
        } 
    }, 
    series: [] 
}; 
(3)加载数据。大家经过jQuery的.get方法来获取数据文件.csv的源委。在success回调函数中,大家拆解分析呼吁重返的字符串,并将结果增添到参数对象(options
object卡塔尔的categories和series成员对象中,最终创立图表。请留心,大家无法在Ajax
callback外创设图表,因为大家要等待服务器再次来到的数量(当倡议成功后,再次来到数据,该进度是异步的)。
[javascript] 
$.get(‘data.csv’, function(data) { 
    // Split the lines 
    var lines = data.split(‘\n’); 
     
    // Iterate over the lines and add categories or series 
    $.each(lines, function(lineNo, line) { 
        var items = line.split(‘,’); 
         
        // header line containes categories 
        if (lineNo == 0) { 
            $.each(items, function(itemNo, item) { 
                if (itemNo > 0)
options.xAxis.categories.push(item); 
            }); 
        } 
         
        // the rest of the lines contain data with their name in the
first position 
        else { 
            var series = { 
                data: [] 
            }; 
            $.each(items, function(itemNo, item) { 
                if (itemNo == 0) { 
                    series.name = item; 
                } else { 
                    series.data.push(parseFloat(item)); 
                } 
            }); 
             
            options.series.push(series); 
     
        } 
         
    }); 
     
    // Create the chart 
    var chart = new Highcharts.Chart(options); 
}); 
4.2 加载XML数据
从XML文件加载数据与加载CSV文件近似。Highcharts不能够管理预订义的XML数据(只好管理数组)。因而,整个经过由你来编排XML数据,并为它定义叁个解析函数。相对于CSV文件来讲,XML的最小胜笔是,它扩展了一些符号数据(那也是接收JSON的原故)。使用XML的利益在于,最少对于一丝丝的数额的话,你不必要手动分析再次来到的多少。你能够行使jQuery现成的DOM深入剖判技巧来做客XML数。你能够在data-from-xml.htm见到实例,数据蕴含在data.xml。
五、活动图(Live Charts)
纵然大家早已因此布置对象(configuration
object)定义图表,然后选拔性地预处理(optionally
preprocessed),最后经过new
Highcharts.Chart(卡塔尔起首化和渲染图表,大家依然有机会通过API来改造图表。chart,axis,series以致point对象有广大措施,譬如update,remove,addSeries,addPoints等等。完整的列表能够查阅API参考(the
API Reference)下方法和总体性。
5.1 案例学习:a live connection to the server
上边包车型客车例证将显示什么营造贰个活动的图纸(live
chart)通过每一秒种从服务器检索的数额。首先,我们要创立自定义函数requestData,它起头在图纸加载事件(load
event)中调用,随后在Ajax回调函数success中调用。你能够在live-server.htm中看见结果。
1.确立服务器。在这里个事例中,大家筛选PHP作为服务器脚本语言再次来到蕴涵时间(time)以致y值(y
value)的javascript数组。下列为live-server-data.php文件的代码:
[php]
<?php 
 // Set the JSON header 
 header(“Content-type: text/json”); 
  
 // The x value is the current JavaScript time, which is the Unix time
multiplied by 1000. 
 $x = time() * 1000; 
 // The y value is a random number 
 $y = rand(0, 100); 
  
 // Create a PHP array and echo it as JSON 
 $ret = array($x, $y); 
 echo json_encode($ret); 
 ?> 
2.定义全局变量。须求重申的是,这里不可不定义chart全局变量,因为在document
ready函数以至requestData函数均要拜望。

 Highcharts方今支撑直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种分化类型的图样,能够满足你对Web图表的别的供给!

背景

作为一个根本的后端程序员,作者既未有过多时间去慢慢研商利用JavaScript(客户想要在24时辰内就会在网络看看图片),也不抱有先进的前端编码知识。从根本上说,作者盼望差不离从不别的前端编制程序经历的PHP开采人士也能够非常快支付出杰出的图纸。

本身试过pChart,一个盛行的PHP图表库。生成的图纸看起来挺不错,即便是可下载的,但图表都以静态图像。Highcharts就如是最棒的选项。图表看上去令人惊艳,又是动漫的,並且有不菲自定义选项,但同有时候,它也是特别复杂的,何况须求大批量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务亦非免费的。

其余贰个足以排上用项的真实意况是,对于JavsScript对象的话,点符号(.)和方括号[]是等价的。所以,你能够因此名称来做客成员。那意味:

 

导出图表到图片

刚初叶的时候,对此笔者很麻烦,因为作者不晓得怎么着导出图表。事实注解,phpChart图表能够导出为可下载的图样,但以此进度并不曾很好的记录下来。我意识增加以下代码到具备页面包车型大巴平底,就足以改变局面:

<script type="text/javascript" 
  src="http://www.codeproject.com/phpChart/js/showjs.js"></script>

下载showjs.js:

options[‘renderTo’]

 

加多标题

你应有为您的图样添加题目,以便客户知道他们在看什么。

$pc->set_title(array('text'=>’My Simplest Graph'));

等价于

3.采纳script蕴涵js代码,记住 type=”text/javascript”
要求钦命,避防出标题。

调试phpChart

终极,在截至早前,作者要提一提phpChart的多个不胜珍爱的性状。那就是它的放置调节和测量检验功用。在其网址上,全数的在线例子()都有调治能够启用生动的上行下效和七个显明的可方便移植上面代码的选项卡——分别是JavaScript和PHP。

要启用调节和测量检验,只需加多以下代码行到conf.php文件:

define('DEBUG', true);

一、前言(Preface)
Highcharts是三个格外流行,分界面美观的纯Javascript图表库。它最首要回顾多个部分:Highcharts和Highstock。
Highcharts可以为你的网址或Web应用程序提供直观,相互作用式的图纸。如今辅助线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
Highstock可以为你方便地创立期货或类似的时日轴图表。它回顾先进的领航选项,预设的日期范围,日期选拔器,滚动和平移等等。
 二、安装(Installation)
1.Highcharts套用jQuery,MooTool甚至Prototype等Javascript框架来拍卖主题的Javascript职责。由此,在应用Highcharts早前,须要在页面尾部援用那几个本子文件。假诺您利用jQuery作为基本框架,那么您须要在页面底部同期引用jQuery和Hightcharts多少个文件。如下:
[javascript]
<script
src=””
type=”text/javascript”></script> 
<script src=”/js/highcharts.js”
type=”text/javascript”></script> 
Highcharts(HighstockState of Qatar已经停放了jQuery适配器(adapter卡塔尔(注:恐怕是jQuery框架最盛行的案由),不过并不曾松开MooTool等别的javascript框架的适配器(adapter卡塔尔(قطر‎。由此,当大家使用MooTool等任何JS框架时,需求单独引用适配器(adapter卡塔尔脚本文件。如下:
[javascript] 
<script
src=””
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对象将用作第四个参数字传送递。

<div id="container" style="min-width:800px;height:400px"></div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图