基于PHP的超炫酷HTML5交互式图表,Highcharts使用指南

 百家乐-前端     |      2020-03-14 06:13

本文由码农网 – 小峰原创翻译,转载请看清文末的转载供给,款待参加大家的付费投稿陈设!

[javascript]   
 Highcharts图表控件是时下应用最为广泛的图样控件。本文将从零开头稳步为你介绍Highcharts图表控件。通过本文,你将学会怎样布署Highcharts以至动态生成Highchart图表。

用PHP达成专门的工作级的依据Web的图纸,而不必要浓郁的HTML5和JavaScript知识。

一、前言(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> 
lom599乐百家手机 ,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对象将用作第几个参数字传送递。

介绍

前段时间,笔者索要从一组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库的周旋或相对UEvoqueL。

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