首页vns威尼斯城官网登入 › 可以满足你对Web图表的任何需求, Highcharts图表控件是目前使用最为广泛的图表控件

可以满足你对Web图表的任何需求, Highcharts图表控件是目前使用最为广泛的图表控件

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

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

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

第四部分: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知识。

一、前言(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(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作为基本框架的情况,$(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对象将作为第一个参数传递。

 

您可能感兴趣的文章:

  • 纯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作为我的首选工具。

如果你想在同一个页面上使用一组参数,可以定义一个选项对象(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] 
}) 

 Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,

您可能感兴趣的相关文章

背景

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

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

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

 Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求

  • 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”,也可以是任何非空格字符串。它必须是一个唯一的值,这样你才可以在一个页面中拥有多个图表。

options.renderTo

Highcharts功能强大,图表种类多也很漂亮,高度自定义,兼容性比较好。具体参考:

 

添加标题

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

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

等价于

 

D3.js

图片 2

D3
是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到
DOM,然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的
HMTL 表格,或是利用它的流体过度和交互,用相似的数据创建惊人的 SVG
条形图。

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=4962

上一篇:

下一篇:

相关文章