新葡京澳门网站 1

【新葡京澳门网站】基于PHP的超炫酷HTML5交互式图表,Highcharts使用指南

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

[javascript]   
 Highcharts图表控件是如今采取最为广泛的图样控件。本文将从零起首稳步为你介绍Highcharts图表控件。通过本文,你将学会怎么样安顿Highcharts甚至动态生成Highchart图表。

用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适配器(adapterState of Qatar(注:或许是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(State of Qatar函数。
假定你想生成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对象将作为第4个参数字传送递。

介绍

近期,作者急需从一组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] 
}) 

背景

作为二个至关心注重要的后端程序员,小编既未有过多时光去逐步切磋选取JavaScript(客商想要在24小时内就能够在英特网见到图片),也不抱有先进的前端编码知识。从根本上说,作者期望差相当少从不其他前端编制程序经历的PHP开垦职员也能够异常快支付出不错的图纸。

自家试过pChart,二个盛行的PHP图表库。生成的图片看起来挺不错,即便是可下载的,但图表都以静态图像。Highcharts好似是最佳的抉择。图表看上去令人惊艳,又是动漫的,並且有这几个自定义选项,但还要,它也是特别复杂的,并且需求大量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务亦不是无需付费的。

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

phpChart的基本要素

本身最欣赏phpChart的地点就是它能令人从容易和最少些的代码动手。

phpChart简洁明了版能够从那边下载。下载文件并解压到网址根目录。

设置conf.php

笔者们要做的第一件事是设置变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在您的Web服务器上的phpChart库的相持或相对U翼虎L。

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

增进标题

你应当为你的图纸加多标题,以便顾客知道他们在看怎么样。

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

等价于

丰硕动漫

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