Highcharts 配置语法
我将为大家介绍使用 Highcharts 生成图表的一些配置。
第一步：创建 HTML 页面
创建一个 HTML 页面，引入 jQuery 和 Highcharts 库：
文件名：HighchartsTest.htm
<html>
<head>
<title>Highcharts 测试</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/try/demo_source/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>
其中 id = container 的 div 用于包含 Highcharts 绘制的图表。简单说就是图片的展示位置
第二步: 创建配置文件
Highcharts 库使用 json 格式来配置。
$('#container').highcharts(json);
这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。步骤如下：
标题
为图表配置标题：
var title = {
text: '月平均气温'
};
副标题
为图表配置副标题：
var subtitle = {
text: 'Source: runoob.com'
};
X 轴
配置要在 X 轴显示的项。
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};
Y 轴
配置要在 Y 轴显示的项。
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
提示信息
配置提示信息：
var tooltip = {
valueSuffix: '\xB0C'
}
展示方式
配置图表向右对齐：
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
数据
配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
第三步: 创建 json 数据
组合是由配置信息:
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
Step 4: Draw the chart
$('#container').highcharts(json);
实例
以下为完整的实例(HighchartsTest.htm)：
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: '月平均气温'
};
var subtitle = {
text: 'Source: runoob.com'
};
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
以上实例输出结果为：
<iframe style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px;" src="http://www.runoob.com/try/demo_source/HighchartsTest.htm" frameborder="0" width="100%" height="471"></iframe>
相关推荐
在这个“Highcharts 折线统计图”的主题中，我们将深入探讨如何使用Highcharts库来绘制高质量的折线图，以及其在实际项目中的应用。 首先，让我们了解折线图的基本概念。折线图是一种用于展示数据趋势和变化的图形...
通过以上介绍，我们可以看到Highcharts Asp.net结合JQuery的强大力量，它为Web应用程序提供了丰富的数据可视化解决方案，使得开发者能够创建出既美观又交互性强的统计图表。无论是在企业级应用还是个人项目中，这都...
**Highcharts 图表统计——柱状图与饼状图详解** Highcharts 是一款强大的JavaScript库，专门用于创建高质量的数据可视化图表。它支持多种图表类型，包括柱状图、饼状图等，使得数据呈现更加直观易懂。在本文中，...
本主题将探讨如何利用Highcharts库结合PHP和MySQL数据库来生成饼状统计图，帮助我们更好地理解和展示数据。 【Highcharts】： Highcharts是一个基于JavaScript的开源图表库，它提供了丰富的图表类型，如柱状图、...
在“jquery统计图插件Highcharts-2.2.5.zip”这个压缩包中，包含了使用Highcharts库进行图表开发所需要的各种资源和示例。以下是关于Highcharts及其组件的详细说明： 1. **Highcharts与jQuery的关系**： ...
标签中提到的"js"表示Highcharts是基于JavaScript实现的，"统计"和"图表"表明其主要用于数据统计和可视化，"前端"则意味着它主要应用于Web页面的客户端部分。在实际项目中，Highcharts通常与后端数据接口配合，获取...
在本项目中，“数据统计-图形化展示-HighCharts插件”是利用HighCharts的功能来实现数据的动态轮换展示，即统计图会自动进行切换，以呈现多角度的数据分析结果。 首先，我们需要了解HighCharts的基本用法。...
本篇文章将深入探讨如何利用Highcharts进行图形统计，并结合后台数据处理，以实现动态的数据展示。 首先，我们需要理解Highcharts的基本结构。Highcharts的核心是HTML5的canvas元素，通过JavaScript来生成和控制...
在地图方面，ECharts提供了全国以及中国各省份、城市的地图数据，可以用于展示地域性的统计信息。用户可以通过ECharts提供的API，结合JSON数据来动态展示不同地区的变化情况，例如经济指标、人口分布等。 ...
解决highcharts多级下钻问题，下钻过程中使用了多种图例，自带上钻功能 c#，java使用方法一样，demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻...
在描述中提到了“支持各种统计图形”，Highcharts确实提供了多种图表类型，包括折线图、柱状图、饼图、散点图、面积图、瀑布图等，适用于展示各类数据集。此外，“有鼠标事件”意味着用户可以通过鼠标交互与图表进行...
HighCharts数据统计图表制作插件,数据显示不直观，需要用图表来展示数据的话，HighCharts是一个很好的插件，简单易用，图表漂亮，下载附件，里面有各种图表的例子，相信你不会失望！感谢支持...
color 用于展示图表，折线/柱状/饼状等图的颜色，数组形式。 array Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：
jQuery 和 Highcharts 是两个非常流行且强大的工具，结合使用可以创建出各种复杂的统计图表。本文将深入探讨如何利用 jQuery 和 Highcharts 实现数据统计图表的制作。 首先，jQuery 是一个广泛使用的 JavaScript 库...
这个“jQuery highcharts.js柱形统计图插件特效源码.zip”文件包含了一个使用jQuery与Highcharts.js结合实现的柱形统计图的示例代码。 首先，我们要了解jQuery，它是一个流行的JavaScript库，简化了DOM操作、事件...
5. **交互性**：Highcharts的图表支持鼠标悬停、点击等交互事件，可以触发自定义函数，实现图表的进一步操作，如弹出详细信息框、高亮数据点等。 6. **图表类型**：Highcharts支持多种图表类型，包括但不限于： - ...
本篇文章将深入探讨如何使用JavaScript实现统计图功能，以及可能涉及的关键技术和工具。 首先，JavaScript是一种在Web浏览器中运行的脚本语言，它可以与HTML和CSS紧密结合，为网页添加动态功能。在数据可视化领域，...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者创建出丰富、互动且美观的统计图表。在3.0.6版本中，这个库提供了多种图表类型，包括柱状图、折线图、饼图、散点图、面积图等，能够满足不同...
饼状图用扇形面积表示各部分在整体中所占的比例。Highcharts支持3D效果、切片与拖动、数据标签、工具提示等功能，使饼状图更具吸引力和可读性。可以调整各个扇区的颜色、角度、起始位置等参数。 3. **折线图（Line...