Highcharts应用指南(从零开始配置highcharts)

最新推荐文章于 2021-09-04 17:08:41 发布

whbaicxy

最新推荐文章于 2021-09-04 17:08:41 发布

阅读量1w

点赞数

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Highcharts应用指南(从零开始配置highcharts)

择要

Highcharts图表控件是今朝应用最为广泛的图表控件。本文将从零开端慢慢为你介绍Highcharts图表控件。经由过程本文，你将学会如何设备Highcharts以及动态生成Highchart图表。

--------------------------------------------------------------------------------

· 媒介(Preface)

· 安装(Installation)

· 如何设置参数(How to set up the options)

· 预处理惩罚参数(Preprocess the options)

· 活动图(Live charts)

--------------------------------------------------------------------------------

一、媒介(Preface)

Highcharts是一个很是风行，界面美观的纯Javascript图表库。它首要包含两个项目组：Highcharts和Highstock。

Highcharts可认为您的网站或Web应用法度供给直观，互动式的图表。今朝支撑线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。

Highstock可认为您便利地建树股票或一般的时候轴图表。它包含进步前辈的导航选项，预设的日期局限，日期选择器，迁移转变和平移等等。

若是想要懂得更多Highcharts的信息，可以参考官网：http://www.highcharts.com。

二、安装(Installation)

1.Highcharts沿用jQuery，MooTool以及Prototype等Javascript框架来处理惩罚根蒂根基的Javascript任务。是以，在应用Highcharts之前，须要在页面头部引用这些脚本文件。若是你应用jQuery作为根蒂根基框架，那么你须要在页面头部同时引用jQuery和Hightcharts两个文件。如下：

Highcharts(Highstock)已经内置了jQuery适配器(adapter)(注：可能是jQuery框架最风行的缘故)，然则并没有内置MooTool等其他javascript框架的适配器(adapter)。是以，当我们应用MooTool等其他JS框架时，须要零丁引用适配器(adapter)脚本文件。如下：

提示：安装Highstock过程与上述雷同，除了JavaScript文件名称是highstock.js而不是highcharts.js。

2.在您的网页头部的脚本标签，或在一个零丁的js文件，添加JavaScript代码来初始化图表。renderTo参数用来设置图表衬着的地位，一般来说是一个具有ID的DIV元素(参考第3步)。

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调用长途办事器供给的数据。

var chart1; // 全局变量
$(document).ready(function() {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: “container”
}，
rangeSelector: {
ed: 1
}，
series: [{
name: “USD to EUR”，
data: usdtoeur // 数组变量
}]
});
});

3.在页面中添加一个DIV元素，作为放置Highcharts图表的容器。须要为其设置ID值，与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。

4.你可以经由过程Highcharts.setOptions办法为Highcharts图表设置一个全局的主题(可选的)。下载包含有四个预定义的主题，若是你须要应用从这些主题，只需在 highcharts.js 后引用这些文件。比如：

三、如何设置参数(How to set up the options)

Highcharts应用一个JavaScript对象布局来定义参数。选项的值可以是字符串和数字，数组，其他对象，甚至是函数。当您初始化应用新Highcharts.Chart的图表，options对象将作为第一个参数传递。

若是你想在同一个页面上应用一组参数，可以定义一个选项对象(options object)来设置选项。更多内容参考＃4预处理惩罚选项(Preprocessing the options)。

四、预处理惩罚参数(Preprocess the options)

懂得设备对象(configuration object)的工作道理，以及如何用法度来实现，对于实现高效的Highcharts图表显得十分首要。下面将介绍JavaScript对象的根蒂根基常识点：

· 在上方的例子中，Highcharts options被定义为对象字面值(object literals)。经由过程这种办法来标识表记标帜设备，我们可以的到一个清楚的，可读性强的，占用空间低的设备对象。下面这种错杂的代码对于C法度员来说可能斗劲熟悉：

// 不良的风格
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法度员来说，我们更喜好应用下面的风格。须要重视的是，两种实现体式格式的成果是完全雷同的。

// 杰出的风格
var options = {
chart: {
renderTo: “container”，
defaultSeriesType: “bar”
}，
series: [{
name: “Jane”，
data: [1， 0， 4]
}]
};

· 在创建定名的对象后，我们可以经由过程.操纵符来扩大其成员。假设我们已经定义一个对象(见杰出的风格代码)。下面代码代码将添加另一个series。请记住options.series是一个数组，是以我们可以应用push办法。

options.series.push({
name: “John”，
data: [3， 4， 2]
})

· 别的一个可以排上用处的事实是，对于JavsScript对象来说，点符号(.)和方括号[]是等价的。所以，你可以经由过程名称来接见成员。这意味着：

options.renderTo

等价于

options[“renderTo”]

4.1 案例进修： preprocessing the data CSV

经由过程这个简单的例子，我们将学会如何设备根蒂根基的参数(options)，然后经由过程一个Ajax调用长途数据以及解析数据，最后经由过程合适的格局显现出来。在这个例子中，我们应用jQuery来处理惩罚Ajax恳求。当然，你也可以应用MooTool或者Prototype来实现类似的功能。所有的代码在$(document).ready()函数中处理惩罚。你可以在data--csv.htm看到这个例子的结果。

(1)创建一个外部的仅包含数据的CSV文件(数据源)。从下面数据文件中，我们可以看到第一行列出了类此外名称(类似于字段名)。后继的行的第一个地位列出了series name(比如：第二行的”John”)，随后的地位列出相干的值(value)。在实际开辟过程中，我们经常应用PHP或者其他办事器端编程说话(C＃，java等)来创建这个文件的内容。或者你会选择其他的标识表记标帜格局，斗劲的常见的如XML或者JSON(JSON相对XML加倍轻巧)。在这些景象下，jQuery可以解析出数据对象本身。

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)，稍后我们可认为其添加数据。

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外创建图表，因为我们要守候办事器返回的数据(当恳求成功后，返回数据，该过程是异步的)。

$.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--xml.htm看到实例，数据包含在data.xml。

五、活动图(Live Charts)

尽管我们已经经由过程设备对象(configuration object)定义图表，然后选择性地预处理惩罚(optionally preprocessed)，最后经由过程new Highcharts.Chart()初始化和衬着图表，我们仍然有机会经由过程API来改变图表。chart，axis，series以及point对象有很多办法，比如，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文件的代码：

1 <？php
2// Set the JSON header
3header("Content-type: text/json");
4
5// The x value is the current JavaScript time， which is the Unix time multiplied by 1000.
6$x = time() * 1000;
7// The y value is a random number
8$y = rand(0， 100);
9
10// Create a PHP array and echo it as JSON
11$ret = array($x， $y);
12echo json_encode($ret);
13 ？>

2.定义全局变量。须要夸大的是，这里必须定义chart全局变量，因为在document ready函数以及requestData函数均要接见。

1var chart; // global

3.实现requestData函数。在这个例子中应用jQuery中$.ajax函数来处理惩罚ajax事务(你也可以用其他ajax框架来调换)。当数据从办事器成功返回后，经由过程addPoint办法添加点。

1/**
2 * Request data the server， add it to the graph and set a timeout to request again
3*/
4function requestData() {
5 $.ajax({
6 url: “live-server-data.php”，
7 success: function(point) {
8var series = chart.series[0]，
9 shift = series.data.length > 20; // shift if the series is longer than 20
10
11// add the point
12 chart.series[0].addPoint(point， true， shift);
13
14// call it again after one second
15 setTimeout(requestData， 1000);
16 }，
17 cache: false
18 });
19 }

4.创建图表。

1 $(document).ready(function() {
2 chart = new Highcharts.Chart({
3 chart: {
4 renderTo: “container”，
5 defaultSeriesType: “spline”，
6 events: {
7 load: requestData
8 }
9 }，
10 title: {
11 text: “Live random data”
12 }，
13 xAxis: {
14 type: “datetime”，
15 tickPixelInterval: 150，
16 maxZoom: 20 * 1000
17 }，
18 yAxis: {
19 minPadding: 0.2，
20 maxPadding: 0.2，
21 title: {
22 text: “Value”，
23 margin: 80
24 }
25 }，
26 series: [{
27 name: “Random data”，
28 data: []
29 }]
30 });
31 });

作者：可米小子
出处：http://liuhaorain.cnblogs.com
本文版权归作者和博客园共有，迎接转载，但未经作者赞成必须保存此段声明，且在文章页面明显地位给出原文连接，不然保存究查法令义务的权力

whbaicxy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Highcharts应用指南(从零开始配置highcharts)

Highcharts应用指南(从零开始配置highcharts)择要Highcharts图表控件是今朝应用最为广泛的图表控件。本文将从零开端慢慢为你介绍Highcharts图表控件。经由过程本文，你将学会如何设备Highcharts以及动态生成Highchart图表。------------------------------------------------
复制链接

扫一扫