澳门新浦京手机版基于PHP的超炫酷HTML5交互式图表

本文由码农网 –
小峰原创翻译,转发请看清文末的转发供给,应接参与大家的付费投稿布置!

[javascript]   
 Highcharts图表控件是当前应用最为遍布的图纸控件。本文将从零伊始稳步为您介绍Highcharts图表控件。通过本文,你将学会怎么样安插Highcharts以至动态生成Highchart图表。

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作为基本框架的情形,$(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] 
}) 

 Highcharts是后生可畏款无需付费开源的纯javascript编写的图表库,能够非常粗略方便的在Web网址或Web应用中足够人机联作性的图样,

背景

作为一个重大的后端程序员,小编既未有过多日子去渐渐斟酌利用JavaScript(顾客想要在24钟头内就会在英特网看看图片),也不具备先进的前端编码知识。从根本上说,小编梦想差不离从未任何前端编制程序经历的PHP开辟人士也能够急速支付出不错的图形。

本身试过pChart,二个流行的PHP图表库。生成的图样看起来挺不错,纵然是可下载的,但图表都以静态图像。Highcharts就像是最佳的选用。图表看上去令人惊艳,又是动漫片的,并且有过多自定义选项,但还要,它也是非常复杂的,况且亟需大批量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务也不是无需付费的。

别的一个得以排上用途的实际是,对于JavsScript对象的话,点符号(.)和方括号[]是等价的。所以,你能够因而名称来拜访成员。那意味着:

 Highcharts如今支撑直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不一样系列的图样,能够满意你对Web图表的任何需求!

phpChart的基本要素

本身最欢畅phpChart的地点便是它能令人从轻巧和最一点点的代码出手。

phpChart精短版能够从那边下载。下载文件并解压到网址根目录。

设置conf.php

小编们要做的第风姿罗曼蒂克件事是设置变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在您的Web服务器上的phpChart库的相对或相对UEnclaveL。

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

等价于

 

加上动画

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
因而那些大约的例证,大家将学会怎么计划宗旨的参数(optionsState of Qatar,然后经过多个Ajax调用长途数据乃至拆解深入分析数据,最后经过适当的格式表现出来。在此个事例中,我们运用jQuery来管理Ajax央求。当然,你也能够利用MooTool只怕Prototype来兑现形似的效率。全数的代码在$(documentState of Qatar.ready(State of Qatar函数中管理。你能够在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 
(2卡塔尔(قطر‎定义基本的启幕的参数。注意到,大家为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
object卡塔尔的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函数均要访问。

1.在官英特网找到下载链接就能够,此中有3个下载项,highchart为首要的,后边多个,highmaps是主题为地图的生龙活虎对图形。highstock是主旨为证券的一些折线图,是有的行当定制化的工具

变动渲染器类型

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

2.应用highchart供给多个公文叁个是底工的jquery(jquery提议1.8.2版本State of Qatar只怕prototype等js框架,甚至highcharts.js。能够在线引用,不过也许不太坚固,建议本地引用。

数组和命名约定

此处还会有一点值得注意的地点。首先,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

 澳门新浦京手机版 3

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

澳门新浦京手机版 4

]
Highcharts图表控件是现阶段利用最为布满的图样控件。本文将从零早先稳步为你介绍Highcharts图表控件。通过本文,你将学会怎么样配置…

 

导出图表到图片

刚起先的时候,对此笔者很烦懑,因为自个儿不精晓怎么样导出图表。事实注解,phpChart图表能够导出为可下载的图样,但那么些历程并从未很好的记录下来。小编发觉增添以下代码到持有页面包车型大巴尾巴部分,就足以扭转局面:

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

下载showjs.js:

澳门新浦京手机版 5

调试phpChart

末尾,在甘休在此以前,作者要提黄金时代提phpChart的二个相当可贵的天性。那便是它的放手调节和测量试验功用。在其网址上,全数的在线例子()都有调整能够启用生动的示范和多个清楚的可平价移植上边代码的选项卡——分别是JavaScript和PHP。

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

define('DEBUG', true);

 须要在活动端应用的时候,酌量这几个。此外图表导出等高档功效,须求额外引入exporting.js 等文件。

最终的沉思

PhpChart的五个首要收益是,通过采取这一个工具,PHP工程师能够实现专门的职业级的依赖Web的图形——而不需求深切驾驭HTML5和JavaScript知识。

假诺您像小编同样,也是后面一个编制程序的门外汉,但雷同须求生成人机联作式的Web图表,那么你可能会合意phpChart。关于phpChart的HTML5图形例子已经全部地罗列到以下那一个页面中。运气好的话,你大概并无需文书档案——就能够直接理解代码。

 

HelloWorld

 1.制造div容器,图表将要这里个容器里画出来,必要制定id,style长度宽度样式须求制订。

   

<div id="container" style="min-width:800px;height:400px"></div>

2.先引进jquery.js,最棒1.8.2本子;highchart.js,因为前者基于前面三个,所以顺序不能够颠倒。

3.应用script富含js代码,记住 type=”text/javascript”
供给钦命,避防出难题。

4.写代码,代码能够放在$(function(State of Qatar{  
 }State of Qatar;中,也足以放在ajax的回调函数里,综上说述要确认保证推行到。

$('#container').highcharts({                   //图表展示容器,与div的id保持一致
        chart: {
            type: 'column'                         //指定图表的类型,默认是折线图(line)
        },
        title: {
            text: 'My first Highcharts chart'      //指定图表标题
        },
        xAxis: {
            categories: ['my', 'first', 'chart']   //指定x轴分组
        },
        yAxis: {
            title: {
                text: 'something'                  //指定y轴的标题
            }
        },
        series: [{                                 //指定数据列
            name: 'Jane',                          //数据列名
            data: [1, 0, 4]                        //数据
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });

highchart的代码,都以json格局的,易于掌握和付出,数据也足以用json来填充,上边举个体协会和做的例子看豆蔻年华看。

+----------+----------------+----------+-------------+
| store_id | store_name     | dur_flow | statis_time |
+----------+----------------+----------+-------------+
|        1 | 上海虹桥店     |       12 | 9:00        |
|        2 | 上海虹桥店     |       32 | 10:00       |
|        4 | 上海虹桥店     |      122 | 11:00       |
|        5 | 上海虹桥店     |      192 | 12:00       |
|        6 | 上海虹桥店     |      325 | 13:00       |
|        7 | 上海浦东店     |       18 | 9:00        |
|        8 | 上海浦东店     |       38 | 10:00       |
|        9 | 上海浦东店     |       78 | 11:00       |
|       10 | 上海浦东店     |      158 | 12:00       |
|       11 | 上海浦东店     |      268 | 13:00       |
|       12 | 上海南京东路店 |        8 | 9:00        |
|       13 | 上海南京东路店 |       18 | 10:00       |
|       13 | 上海南京东路店 |       38 | 11:00       |
|       14 | 上海南京东路店 |      198 | 12:00       |
|       15 | 上海南京东路店 |      438 | 13:00       |
|       16 | 上海南京东路店 |      518 | 14:00       |
|       17 | 上海浦东店     |      398 | 14:00       |
|       18 | 上海虹桥店     |      418 | 14:00       |
+----------+----------------+----------+-------------+

//后台取的数据,一个List<TestChart>
List<TestChart> dat = testChartService.selectStorData();
System.out.println(dat.toString());
writeJson(response, dat);

$(function () {
        $.ajax({
            type: 'post',
            url: '<%=basePath%>storeData',
            async: true,
            cache: false,
            dataType: 'json',
            success: function (data) {
                /*这种方式可以,但是感觉多次一举了*/
                /* var abc = [];
                 for(var i=0;i<data.length;i++){
                 var bcd={};
                 bcd.name=data[i].name;
                 bcd.data=data[i].data;
                 abc.push(bcd);
                 }*/
                /*这种方式尽管可以做到,但是毫无疑问太麻烦了!*/
                /*取店名(如果col里已经有店名了,就不在放进去,实现去重)*/
                var col = [];
                for (var i = 0; i < data.length; i++) {
                    if (col.indexOf(data[i].storeName) > -1) {
                        continue;
                    }
                    col.push(data[i].storeName);
                }
                /*取时间段,同理*/
                var xcate=[];
                for (var i = 0; i < data.length; i++) {
                    if (xcate.indexOf(data[i].statisTime) > -1) {
                        continue;
                    }
                    xcate.push(data[i].statisTime);
                }
                /*循环取出每个店的所有数据,分店存储为对象,再添加到一个array中,充当series的内容*/
                var alldat=[];
                for (var j = 0; j < col.length; j++) {
                    var each={};
                    var singledat = [];
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].storeName == col[j]) {
                            singledat.push(data[i].durFlow);
                        }
                    }
                    each.name=col[j];
                    each.data=singledat;
                    alldat.push(each);
                }
                console.log(alldat);
                $('#container').highcharts({
                    chart: {
                        //type=bar为柱图,type=line为线图
                        type: 'bar',
                        borderRadius: 6,
                        borderColor: '#4572A7',
                        backgroundColor: '#EEEEEE    '
                    },
                    title: {
                        text: 'Historic World Population by Region'
                    },
                    subtitle: {
                        text: 'Source: Wikipedia.org'
                    },
                    xAxis: {
                        categories: xcate,
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Population (millions)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: ' millions'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: alldat
                });
            }
        });
    });

通过地方的意气风发体系做法得以完毕基于后台数据生成图表,不过经过相比较劳累,前面再寻求简化的主意。

澳门新浦京手机版 6

—-未完待续

发表评论

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