Highcharts使用指南

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

[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> 
Highcharts(Highstock卡塔尔国已经嵌入了jQuery适配器(adapter卡塔尔(注:只怕是jQuery框架最流行的来由),不过并不曾松开MooTool等任何javascript框架的适配器(adapter卡塔尔。由此,当大家使用MooTool等此外JS框架时,必要独自引用适配器(adapterState of Qatar脚本文件。如下:
[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库的相对或相对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();

那正是从头你需求的代码。上面是透过渲染的输出。

欧洲杯买球下注盘口 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’]

代码实质

一经你在浏览器中查看来源,你会开采,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]]

4.1 案例学习: preprocessing the data from CSV
透过那些简单的例子,大家将学会怎么着安插基本的参数(options卡塔尔(قطر‎,然后通过叁个Ajax调用长途数据以至拆解解析数据,最终经过适当的格式表现出来。在这里个事例中,大家接纳jQuery来管理Ajax央浼。当然,你也能够运用MooTool可能Prototype来落到实处相同的意义。全数的代码在$(document卡塔尔国.ready(卡塔尔(قطر‎函数中拍卖。你能够在data-from-csv.htm看见这几个例子的机能。
(1卡塔尔创建多少个外界的仅包蕴数据的CSV文件(数据源)。从上面数据文件中,大家得以观望第一队列出了类别的名目(肖似于字段名)。后继的行的第一个职责列出了series
name(比如:第二行的’John’卡塔尔(قطر‎,随后的职位列出相关的值(value卡塔尔。在事实上支付进程中,大家经常应用PHP也许其余服务器端编制程序语言(C#,java等卡塔尔(قطر‎来创建那些文件的剧情。也许您会选择此外的标记格式,相比较的大面积的如XML恐怕JSON(JSON相对XML越发轻便)。在此些情形下,jQuery能够深入分析出多少对象自己。
[css] 
Categories,Apples,Pears,Oranges,Bananas 
John,8,4,6,5 
Jane,3,4,2,3 
Joe,86,76,79,77 
Janet,3,16,13,15 
(2State of Qatar定义基本的初始的参数。注意到,大家为categorys和series对象创立了空数组(empty
arrays),稍后大家得感到其丰裕数据。
[javascript] 
var options = { 
    chart: { 
        renderTo: ‘container’, 
        defaultSeriesType: ‘column’ 
    }, 
    title: { 
        text: ‘Fruit Consumption’ 
    }, 
    xAxis: { 
        categories: [] 
    }, 
    yAxis: { 
        title: { 
            text: ‘Units’ 
        } 
    }, 
    series: [] 
}; 
(3)加载数据。我们经过jQuery的.get方法来获取数据文件.csv的内容。在success回调函数中,我们深入分析呼吁重临的字符串,并将结果增添到参数对象(options
objectState of Qatar的categories和series成员对象中,最终成立图表。请介怀,我们不可能在Ajax
callback外创设图表,因为我们要等待服务器重返的数据(当呼吁成功后,再次回到数据,该进程是异步的)。
[javascript] 
$.get(‘data.csv’, function(data) { 
    // Split the lines 
    var lines = data.split(‘\n’); 
     
    // Iterate over the lines and add categories or series 
    $.each(lines, function(lineNo, line) { 
        var items = line.split(‘,’); 
         
        // header line containes categories 
        if (lineNo == 0) { 
            $.each(items, function(itemNo, item) { 
                if (itemNo > 0)
options.xAxis.categories.push(item); 
            }); 
        } 
         
        // the rest of the lines contain data with their name in the
first position 
        else { 
            var series = { 
                data: [] 
            }; 
            $.each(items, function(itemNo, item) { 
                if (itemNo == 0) { 
                    series.name = item; 
                } else { 
                    series.data.push(parseFloat(item)); 
                } 
            }); 
             
            options.series.push(series); 
     
        } 
         
    }); 
     
    // Create the chart 
    var chart = new Highcharts.Chart(options); 
}); 
4.2 加载XML数据
从XML文件加载数据与加载CSV文件相像。Highcharts不能够管理预约义的XML数据(只能管理数组)。由此,整个经过由你来编排XML数据,并为它定义一个分析函数。相对于CSV文件来讲,XML的最大胜笔是,它扩展了一些标识数据(那也是接纳JSON的缘故)。使用XML的好处在于,最少对于一些些的数码来讲,你不须要手动深入解析重临的数额。你可以行使jQuery现存的DOM分析手艺来做客XML数。你可以在data-from-xml.htm来看实例,数据包含在data.xml。
五、活动图(Live Charts)
即使大家早已通过布置对象(configuration
object)定义图表,然后接纳性地预管理(optionally
preprocessed),最终经过new
Highcharts.Chart(卡塔尔发轫化和渲染图表,我们依然有机缘通过API来改动图表。chart,axis,series以至point对象有无数主意,举个例子update,remove,addSeries,addPoints等等。完整的列表能够查看API参照他事他说加以侦查(the
API Reference)下方法和性质。
5.1 案例学习:a live connection to the server
上边包车型地铁事例将显得如何营造二个平移的图纸(live
chart)通过每一秒种从服务器检索的数码。首先,我们要成立自定义函数requestData,它开始在图纸加载事件(load
event)中调用,随后在Ajax回调函数success中调用。你能够在live-server.htm中看看结果。
1.起家庭服务务器。在此个例子中,大家选拔PHP作为服务器脚本语言重返满含时间(time)以致y值(y
value)的javascript数组。下列为live-server-data.php文件的代码:
[php]
<?php 
 // Set the JSON header 
 header(“Content-type: text/json”); 
  
 // The x value is the current JavaScript time, which is the Unix time
multiplied by 1000. 
 $x = time() * 1000; 
 // The y value is a random number 
 $y = rand(0, 100); 
  
 // Create a PHP array and echo it as JSON 
 $ret = array($x, $y); 
 echo json_encode($ret); 
 ?> 
2.概念全局变量。须要强调的是,这里不可不定义chart全局变量,因为在document
ready函数甚至requestData函数均要访谈。

改正渲染器类型

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

欧洲杯买球下注盘口 2

请小心,笔者用的是phpChart公司版。 phpChart精短版只扶植折线图。

1 var chart; // global

数组和命名约定

此处还会有点值得注意之处。首先,phpChart函数中央银行使的大约全体参数是二个数组,不是成套,但差十分的少具有的都以。只需记住那或多或少,就能够免止调节和测验时的大度憎恶难题(后边作者将简要地覆盖调节和测量试验效率)。其次,渲染器在phpChart中被叫作“插件”,故而你必需像这么传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

3.贯彻requestData函数。在此个例子中选用jQuery中$.ajax函数来管理ajax事务(你也足以用其余ajax框架来代表)。当数码从服务器成功再次回到后,通过addPoint方法加多点。
[javascript] 
/**
  * Request data from the server, add it to the graph and set a timeout
to request again
  */ 
 function requestData() { 
     $.ajax({ 
         url: ‘live-server-data.php’, 
         success: function(point) { 
             var series = chart.series[0], 
                 shift = series.data.length > 20; // shift if the
series is longer than 20 
  
             // add the point 
             chart.series[0].addPoint(point, true, shift); 
              
             // call it again after one second 
             setTimeout(requestData, 1000);     
         }, 
         cache: false 
     }); 
 } 
4.创制图表。
[javascript] 
$(document).ready(function() { 
     chart = new Highcharts.Chart({ 
         chart: { 
             renderTo: ‘container’, 
             defaultSeriesType: ‘spline’, 
             events: { 
                 load: requestData 
             } 
         }, 
         title: { 
             text: ‘Live random data’ 
         }, 
         xAxis: { 
             type: ‘datetime’, 
             tickPixelInterval: 150, 
             maxZoom: 20 * 1000 
         }, 
         yAxis: { 
             minPadding: 0.2, 
             maxPadding: 0.2, 
             title: { 
                 text: ‘Value’, 
                 margin: 80 
             } 
         }, 
         series: [{ 
             name: ‘Random data’, 
             data: [] 
         }] 
     });         
 }); 
作者:qinpeng100423

高级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

欧洲杯买球下注盘口 3

]
Highcharts图表控件是当下应用最为司空眼惯的图纸控件。本文将从零最初稳步为您介绍Highcharts图表控件。通过本文,你将学会如何配置…

导出图表到图片

刚起头的时候,对此作者很麻烦,因为作者不知情怎么导出图表。事实申明,phpChart图表能够导出为可下载的图片,但这些进程并不曾很好的记录下来。笔者意识增加以下代码到具有页面的尾部,就能够反败为胜:

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

下载showjs.js:

调试phpChart

末了,在竣事此前,我要提一提phpChart的三个万分可贵的风味。那正是它的内置调节和测验成效。在其网址上,全部的在线例子()都有调整能够启用生动的示范和四个显著的可方便移植上边代码的选项卡——分别是JavaScript和PHP。

要启用调节和测量检验,只需增多以下代码行到conf.php文件:

define('DEBUG', true);

最后的寻思

PhpChart的三个重中之重收益是,通过选拔这一个工具,PHP程序员能够达成专门的学问级的借助Web的图样——而不需求浓重掌握HTML5和JavaScript知识。

假定您像我同一,也是后边八个编制程序的门外汉,但同样必要生成人机联作式的Web图表,那么您恐怕会赏识phpChart。关于phpChart的HTML5图片例子已经完全地罗列到以下那一个页面中。运气好的话,你只怕并不必要文书档案——就能够直接理解代码。

相关文章