奥门新浦京官方网站Highcharts使用简例及异步动态读取数据,highcharts异步

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

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]} 

第四部分: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(); 

  众多周知,图形和图表要比文本更具表现力和说服力。图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。

用PHP实现专业级的基于Web的图表,而无需深入的HTML5和JavaScript知识。

您可能感兴趣的文章:

  • 纯JAVASCRIPT图表动画插件Highcharts Examples
  • Highcharts 非常实用的Javascript统计图demo示例
  • JQuery Highcharts 动态生成图表的方法
  • 浅析jquery的js图表组件highcharts
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • PHP+mysql+Highcharts生成饼状图
  • HighCharts图表控件在ASP.NET WebForm中的使用总结(全)

Highcharts 是一个用纯JavaScript编写的一个图表库,
能够很简单便捷的在web网站或是web应用…

  在这篇文章中,我们收集了12款值得网站开发者收藏的 JavaScript 图形图表库,可以帮助你实现各种功能的图表。

介绍

最近,我需要从一组PHP数据组快速创建图表。要求图表必须是交互式的,用户友好的,也可下载的。在评估了一些PHP图表的解决方案,包括phpChart、pChart和Highcharts之后,我决定采用phpChart作为我的首选工具。

您可能感兴趣的相关文章

背景

作为一个主要的后端程序员,我既没有很多时间去慢慢研究使用JavaScript(客户想要在24小时内就能在网上看到图表),也不具备先进的前端编码知识。从根本上说,我希望几乎没有任何前端编程经验的PHP开发人员也能够快速开发出精美的图表。

我试过pChart,一个流行的PHP图表库。生成的图表看起来挺不错,虽然是可下载的,但图表都是静态图像。Highcharts似乎是最好的选择。图表看上去令人惊艳,又是动画的,并且有很多自定义选项,但同时,它也是非常复杂的,而且需要大量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务也不是免费的。

  • Web 前端开发人员和设计师必读文章集锦
  • 十个拥有丰富 UI 组件的 JavaScript 框架
  • 十款精心挑选的在线 CSS3 代码生成工具
  • 开发者必备的八个最佳云端集成开发环境
  • 2012年度最佳 Web 前端开发工具和框架

phpChart的基本要素

我最喜欢phpChart的地方就是它能让人从简单和最少量的代码入手。

phpChart精简版可以从这里下载。下载文件并解压到网站根目录。

设置conf.php

我们要做的第一件事是设置变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在你的Web服务器上的phpChart库的相对或绝对URL。

define('SCRIPTPATH','/phpChart/');

创建最简单的图表

包含PHP头文件conf.php:

require_once("../conf.php");

调用构造函数C_PhpChartX,最后调用draw()函数。

$pc=new C_PhpChartX(array(array(123, 34, 51, 22, 3)), ‘simplest_graph’);
$pc->draw();

这就是开始你需要的代码。下面是经过渲染的输出。

奥门新浦京官方网站 1

这就是我所谓的最少量的编码。当你有一个团队的程序员来工作的时候,艰辛地去学习基础就没有意义了。任何程序员尽快想要做的一件事就是从一组新的库或工具埋头研究复杂的文档。

顺便说一句,构造函数中的第二个参数的命名对你的图表而言应该是唯一的。我键入的是“simplest_graph”,也可以是任何非空格字符串。它必须是一个唯一的值,这样你才可以在一个页面中拥有多个图表。

 

添加标题

你应该为你的图表添加标题,以便用户知道他们在看什么。

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

D3.js

奥门新浦京官方网站 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();

ChartJS

奥门新浦京官方网站 3

Chart.js
是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas
基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方
JavaScript 库,小于 5KB。

代码实质

如果你在浏览器中查看来源,你会发现,phpChart自动包含了许多的JavaScript以及CSS文件,包括jquery.js、jquery-ui,和jqplot.js、jquery-ui.css等。虽然图表在浏览器中通过客户端的JavaScript渲染,但在前端的代码完全是PHP。

之所以受人欢迎是因为这样一来对于我——一个PHP开发人员而言就不再也需要担心JavaScript了,因为phpChart会为我自动处理。下面是在查看源代码时生成的全部JavaScript代码——是我前面四行PHP代码的结果。

<script language="JavaScript" type="text/javascript"> 
     var _simplest_graph_plot_properties;
    $(document).ready(function(){ 
    setTimeout( function() { 
    _simplest_graph_plot_properties = {
    "title":{
    "text":"My Simplest Graph","show":1
    },"animate":true,"animateReplot":true
    }

    $.jqplot.config.enablePlugins = true;
    $.jqplot.config.defaultHeight = 300;
    $.jqplot.config.defaultWidth = 400;
    _simplest_graph= $.jqplot("simplest_graph", 
           [[123, 34, 51, 22, 3]], _simplest_graph_plot_properties);

    }, 200 );
    });
</script>

正如你可能也会注意到的,“simplest_graph``”被用作JavaScript变量的一部分,如 _simplest_graph_plot_properties表示jqplot对象。这就是前面我所说的命名必须唯一的原因。

此外,该PHP数据组被自动转换为JavaScript数组,所以以下PHP数组:

array(array(123, 34, 51, 22, 3))

成为JavaScript数组:

[[123,34,51,22,3]]

Highcharts JS

奥门新浦京官方网站 4

Highcharts JS
是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括
iPhone、IE 和火狐等等;对个人用户完全免
费;纯JS,无BS;支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言:不管是
PHP、Asp.net 还是 Java 都可以使用。

改变渲染器类型

PhpChart支持实现柱形图、折线图和堆栈图;带状线图;块图;气泡图;蜡烛图;gecko图;meter图;以及其他几种类型的图表。渲染器支持:

  • BarRenderer
  • BezierCurveRenderer
  • BlockRenderer
  • BubbleRenderer
  • CanvasAxisLabelRenderer
  • CanvasAxisTickRenderer
  • CategoryAxisRenderer
  • DateAxisRenderer
  • DonutRenderer
  • EnhancedLegendRenderer
  • FunnelRenderer
  • LogAxisRenderer
  • MekkoAxisRenderer
  • MekkoRenderer
  • MeterGaugeRenderer
  • OHLCRenderer
  • PyramidAxisRenderer
  • PieRenderer

如果你不指定类型的话,默认图表类型是折线图。要更改图表类型,需要调用set_series_default函数。例如,将上面的例子更改为饼图

$pc->set_series_default(array('renderer'=>'plugin::PieRenderer'));

奥门新浦京官方网站 5

请注意,我用的是phpChart企业版。 phpChart精简版只支持折线图。

Fusioncharts

奥门新浦京官方网站 6

FusionCharts Suite XT
是个专业的 JavaScript 图表库,能创建任何类型的图表。它创建的图表都是可以进行完全自定义的,标签,字体,边界等等,都可以进行修改。它有很强的交互功能,有许多信息提示,可
点击的 legend 关键字,还有
dril-down,缩放/滚动 和单击打印图表功能。

数组和命名约定

这里还有一些值得注意的地方。首先,phpChart函数中使用的几乎所有参数是一个数组,不是全部,但几乎所有的都是。只需记住这一点,就能避免调试时的大量头痛问题(后面我将简要地覆盖调试功能)。其次,渲染器在phpChart中被称为“插件”,故而你必须像这样传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

Flot

奥门新浦京官方网站 7

Flot 是受 Plotr 和 PlotKit 的 启发,Ole Laursen 基于 jQuery
开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript
库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有:
Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

高级phpChart:自定义JavaScript

到目前为止,所有我展示的都是PHP。在大多数情况下,对于简单的PHP函数调用,phpChart完全能做得很好。为了充分利用phpChart,你或许会想要使用自定义JavaScript。例如,你可以用phpChart从JavaScript函数和外部源加载数据。

下面的sineRenderer是一个自定义JavaScript函数,用于定义从一组随机数显示正弦值。然后传递给set_data_renderer函数。

PHP:

$data1 = array();
$pc = new C_PhpChartX(array($data1),'basic_chart_4');
$pc->set_title(array('text'=>'Basic Chart with Custom JS'));
$pc->set_data_renderer("js::sineRenderer");
$pc->add_plugins(array('pointLabels'));
$pc->set_animate(true);
$pc->draw();

JavaScript:

sineRenderer = function() {
    var data = [[]];
    for (var i=0; i<13; i+=0.5) {
      data[0].push([i, Math.sin(i)]);
    }
    return data;
  };

想要知道set_data_renderer函数的更多内容可点击这里:http://phpchart.org/phpChart/docs/output/C_PhpChartX_set_data_renderer@.html

奥门新浦京官方网站 8

Chartist.js

奥门新浦京官方网站 9

Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG
渲染图,可以被控制,并通过对 CSS3 媒体查询和 SASS 定制。另外
Chartist.js 提供很酷的动画。

导出图表到图片

刚开始的时候,对此我很困扰,因为我不知道如何导出图表。事实证明,phpChart图表可以导出为可下载的图片,但这个过程并没有很好的记录下来。我发现添加以下代码到所有页面的底部,就可以扭转乾坤:

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

下载showjs.js:

n3-charts

奥门新浦京官方网站 10

如果你是一个 AngularJS 开发者,你一定喜欢款有趣的图表。它是建立在 D3.js
AngularJS 的基础上,提供了可定制的 AngularJS
指令的形式不同标准的图表。

调试phpChart

最后,在结束之前,我要提一提phpChart的一个非常宝贵的特点。那就是它的内置调试功能。在其网站上,所有的在线例子()都有调试可以启用生动的演示和两个清晰的可方便移植下面代码的选项卡——分别是JavaScript和PHP。

要启用调试,只需添加以下代码行到conf.php文件:

define('DEBUG', true);

Ember Charts

奥门新浦京官方网站 11

Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库。它包括时间序列、柱状图、饼图、点图,很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展的。

最后的思考

PhpChart的一个主要好处是,通过使用这个工具,PHP程序员可以实现专业级的基于Web的图表——而无需深入了解HTML5和JavaScript知识。

如果你像我一样,也是前端编程的门外汉,但同样需要生成交互式的Web图表,那么你或许会喜欢phpChart。关于phpChart的HTML5图表例子已经完整地罗列到以下这个页面中。运气好的话,你也许并不需要文档——就可以直接理解代码。

Chartkick

奥门新浦京官方网站 12

Chartkick 是专为 Ruby 应用程序的 JavaScript
图表库。它提供了所有主要的图表类型,如饼图,柱形图,条形图,面积,地理,时间,以及多个系列。

MeteorCharts

奥门新浦京官方网站 13

它有一个很酷的图表生成器,为您提供选项来选择图表,选择主题,然后生成一个图表。

amCharts

奥门新浦京官方网站 14

amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5
Charts、Javascript/HTML5 Stock Chart、JavaScript Maps 三种图表组件。

EJS Chart

奥门新浦京官方网站 15

EJS图表声称自己是企业准备的图表库。图表看起来很干净,可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。

uvCharts

奥门新浦京官方网站 16

uvCharts 是一个开源的 JavaScript
图表库,号称有100多个自定义选项。它拥有12种不同的标准图表类型,开箱即用。

ECharts

基于 Canvas,纯 JavaScript
图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。

奥门新浦京官方网站 17

您可能感兴趣的相关文章

  • 10套精美的免费网站后台管理系统模板
  • 14个支持响应式设计的流行前端开发框架
  • 60款很酷的 jQuery 幻灯片演示和下载
  • 8个惊艳的 HTML5 和 JavaScript 特效
  • 35款精致的 CSS3 和 HTML5 网页模板

 

本文链接:推荐16个最好的 JavaScript 图形绘制库

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源


发表评论

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