2757com 3

本文将从零开始逐步为你介绍Highcharts图表控件2757com,付费投稿计划

本文由码农网 –
小峰原创翻译,转发请看清文末的转发供给,接待参加我们的付费投稿安插!

1 var chart; // global

2.先引进jquery.js,最佳1.8.2本子;highchart.js,因为前者基于前边二个,所以顺序不能够颠倒。

你也许感兴趣的篇章:

  • 纯JAVASCEscortIPT图表动漫插件Highcharts Examples
  • Highcharts 极度实用的Javascript总括图demo示例
  • JQuery Highcharts 动态生成图表的主意
  • 浅析jquery的js图表组件highcharts
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • PHP+mysql+Highcharts生成饼状图
  • HighCharts图表控件在ASP.NET WebForm中的使用计算(全)

Highcharts 是二个用纯JavaScript编写的一个图表库,
能够超轻易便捷的在web网站或是web应用…

n3-charts

2757com 1

若果您是三个 AngularJS 开荒者,你早晚合意款风趣的图形。它是树立在 D3.js
AngularJS 的底子上,提供了可定制的 AngularJS
指令的方式分化规范的图样。

数组和命名约定

此处还可能有部分值得注意的地点。首先,phpChart函数中应用的差相当的少具备参数是三个数组,不是100%,但差相当的少全体的都是。只需记住这点,就能够制止调节和测量检验时的豁达厌烦难题(前面我将简要地覆盖调节和测验成效)。其次,渲染器在phpChart中被叫做“插件”,故而你一定要像这样传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

options.renderTo

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> 

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

斯拉维尼亚语好的能够去官方网站:

其次片段: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]} 

第4盘部: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(); 

  在此篇文章中,我们搜集了12款值得网址开拓者收藏的 JavaScript 图形图表库,能够支持您兑现各类功用的图片。

导出图表到图片

刚初始的时候,对此作者很麻烦,因为笔者不明了哪些导出图表。事实注脚,phpChart图表能够导出为可下载的图片,但以此进度并不曾很好的记录下来。作者意识增加以下代码到具有页面包车型客车底层,就足以改变局面:

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

下载showjs.js:

]
Highcharts图表控件是现阶段应用最为普及的图片控件。本文将从零最早稳步为您介绍Highcharts图表控件。通过本文,你将学会怎么配置…

4.写代码,代码可以放在$(function(卡塔尔国{  
 }卡塔尔国;中,也得以投身ajax的回调函数里,一句话来说要担保试行到。

  • Web 前端开拓职员和设计员必读文章集锦
  • 12个具备丰硕 UI 组件的 JavaScript 框架
  • 十款悉心筛选的在线 CSS3 代码生成工具
  • 开拓者必备的几个至上云端集成开垦条件
  • 二零一一寒暑一级 Web 前端开采工具和框架

背景

作为一个至关心注重要的后端程序员,小编既未有过多日子去渐渐研讨采用JavaScript(顾客想要在24时辰内就能够在网络看看图片),也不抱有先进的前端编码知识。从根本上说,小编希望大概从不别的前端编制程序经历的PHP开垦职员也能够相当的慢支付出完美的图片。

自家试过pChart,贰个风行的PHP图表库。生成的图片看起来挺不错,尽管是可下载的,但图表都以静态图像。Highcharts如同是最佳的筛选。图表看上去让人惊艳,又是卡通的,何况有成都百货上千自定义选项,但还要,它也是极其复杂的,何况要求大批量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务亦不是无偿的。

3.兑现requestData函数。在这里个事例中动用jQuery中$.ajax函数来拍卖ajax事务(你也足以用任何ajax框架来代替)。当数码从服务器成功重回后,通过addPoint方法增加点。
[javascript] 
/**
  * Request data from the server, add it to the graph and set a timeout
to request again
  */ 
 function requestData() { 
     $.ajax({ 
         url: ‘live-server-data.php’, 
         success: function(point) { 
             var series = chart.series[0], 
                 shift = series.data.length > 20; // shift if the
series is longer than 20 
  
             // add the point 
             chart.series[0].addPoint(point, true, shift); 
              
             // call it again after one second 
             setTimeout(requestData, 1000);     
         }, 
         cache: false 
     }); 
 } 
4.开立图表。
[javascript] 
$(document).ready(function() { 
     chart = new Highcharts.Chart({ 
         chart: { 
             renderTo: ‘container’, 
             defaultSeriesType: ‘spline’, 
             events: { 
                 load: requestData 
             } 
         }, 
         title: { 
             text: ‘Live random data’ 
         }, 
         xAxis: { 
             type: ‘datetime’, 
             tickPixelInterval: 150, 
             maxZoom: 20 * 1000 
         }, 
         yAxis: { 
             minPadding: 0.2, 
             maxPadding: 0.2, 
             title: { 
                 text: ‘Value’, 
                 margin: 80 
             } 
         }, 
         series: [{ 
             name: ‘Random data’, 
             data: [] 
         }] 
     });         
 }); 
作者:qinpeng100423

 1.创立div容器,图表将要这里个容器里画出来,要求制定id,style长度宽度样式要求拟订。

 

说起底的合计

PhpChart的多少个主要收益是,通过动用那几个工具,PHP程序猿能够兑现职业级的依照Web的图形——而无需深切摸底HTML5和JavaScript知识。

只要您像本身同一,也是前面三个编制程序的门外汉,但同样需求生成人机联作式的Web图表,那么您只怕会心仪phpChart。关于phpChart的HTML5图片例子已经全体地罗列到以下那么些页面中。运气好的话,你或许并无需文书档案——就足以平素明白代码。

一、前言(Preface)
Highcharts是二个特别流行,分界面美观的纯Javascript图表库。它根本包涵多少个部分:Highcharts和Highstock。
Highcharts可感觉您的网址或Web应用程序提供直观,相互作用式的图片。近日扶持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
Highstock可感到您方便地确立股票(stock卡塔尔国或平常的时光轴图表。它满含先进的导航选项,预设的日子范围,日期接受器,滚动和平移等等。
 二、安装(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(Highstock卡塔尔国已经嵌入了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作为基本框架的意况,$(documentState of Qatar.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对象将作为第三个参数字传送递。

 必要在移动端接纳的时候,思忖那么些。别的图表导出等高级作用,需求额外引进exporting.js 等公事。

D3.js

2757com 2

D3
是最流行的可视化库之一,它被好些个任何的报表插件所接受。它同意绑定放肆数据到
DOM,然后将数据驱动调换应用到文书档案中。你能够应用它用一个数组创设基本的
HMTL 表格,或是利用它的流体过度和人机联作,用日常的数额创设惊人的 SVG
条形图。

丰盛卡通片

pChart做不到的里边一件事正是动漫。在phpChart中,动漫扶持通过简单地调用set_animate和传递true值即可使用。

$pc->set_animate(true);

正是这么。当时您的图样应该已经持有了标题和卡通片。完整的代码如下:

$pc = new C_PhpChartX(array(array(123, 34, 51, 22, 3)),'simplest_graph');
$pc->set_animate(true);
$pc->set_title(array('text'=>'My Simplest Graph'));
$pc->draw();

options[‘renderTo’]

 

MeteorCharts

2757com 3

它有一个相当帅的图片生成器,为您提供选项来采撷图表,选择核心,然后生成三个图形。

发表评论

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

相关文章