永利澳门游戏网址304:Highcharts使用指南,基于PHP的超炫酷HTML5交互式图表

本文由码农网 –
小峰原创翻译,转发请看清文末的转发要求,应接参预大家的付费投稿计划!

[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适配器(adapter卡塔尔(قطر‎(注:大概是jQuery框架最流行的原故),可是并不曾松手MooTool等任何javascript框架的适配器(adapterState of Qatar。因而,当大家利用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(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对象将作为首个参数字传送递。

介绍

这段日子,作者须要从一组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库的相对或相对UCR-VL。

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();

那便是从头你供给的代码。上边是通过渲染的输出。

永利澳门游戏网址304 1

那正是本人所谓的最一丢丢的编码。当您有叁个团体的技师来办事的时候,艰苦地去上学底子就不曾意思了。任何技师尽快想要做的一件事正是从一组新的库或工具埋头研商复杂的文书档案。

顺手说一句,构造函数中的第2个参数的命名对你的图片来讲应该是并世无双的。作者键入的是“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’]

发表评论

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