这两天有空看了看HighCharts的用法。使用方便、功能强大、界面美观。粘一个小例子，大部分代码来自官网。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>highcharts使用示例</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/modules/exporting.js"></script>
<script type="text/javascript">
function chart1(){
$('#container').highcharts({
chart: {
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]
}]
});
}
function chart2(){
var chart = 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]
}]
});
}
function chart3(){
var option = new Object();
option.chart = new Object();
option.chart.type="bar";
option.chart.renderTo="container";
option.title={title:"水果的摄入"};
option.xAxis={categories:['苹果','香蕉','桔子'],gridLineWidth:1};
option.yAxis={title:{text:"吃水果的量"},tickInterval:1};
option.series = new Array();
option.series[0] = new Object();
option.series[0].name="张三";
option.series[0].data=[1,3,5];
option.series[1] = new Object();
option.series[1].name="李四";
option.series[1].data=[6,1,5.5];
option.series[2] = new Object();
option.series[2].name="刘能";
option.series[2].data=[3,1,0.3];
var chart = new Highcharts.Chart(option);
}
$(function () {
//chart1();
//chart2();
chart3();
});
</script>
</head>
<body>
<h3 style="text-align:center;">highcharts使用示例</h3>
<div id="container" style="width:100%;height:500px;border:1px solid red;"></div>
</body>
</html>
分享到：
相关推荐
highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要的朋友看看 另外 怎么用highcharts 和 fusioncharts 画 雷达图 ，仪表图 ，会的 朋友 ...
1. **官方文档与示例**：Highcharts官方网站提供了详尽的文档和丰富的示例代码，是初学者入门的最佳起点。 2. **在线课程与教程**：许多在线教育平台如Udemy、Coursera等提供针对Highcharts的课程，适合不同水平的...
在"index.htm"文件中，通常会有一个示例页面或者入门指南，展示了如何在HTML页面中引入Highcharts库并创建一个基本的图表。开发者可以通过查看和修改这个文件来学习如何使用Highcharts。 "js"文件夹内包含的是...
聚合物 Highcharts 样品Polymer Highcharts 是一个可以帮助您在 Dart 中使用 highcharts 的软件包。 有关此包的更多信息，请访问。 该项目包含大量示例，可帮助您入门和运行。 如果您不想克隆这个项目，请。
这些例子不仅能够帮助初学者快速入门，也是高级用户探索Highcharts功能和特性的宝贵资源。开发者可以通过查看源代码，了解如何将不同配置组合在一起，实现特定的图表效果。 总结来说，这个Highcharts资源包提供了一...
1. **index.htm**：这是示例或入门页面，通常用于展示如何在网页中引入Highcharts库并创建基本图表。通过分析这个文件，我们可以学习到如何设置HTML结构，以及如何通过JavaScript来配置和初始化Highcharts对象。 2....
Highcharts的使用门槛较低，即使是初学者，通过查看示例代码也可以快速入门。使用时只需解压下载得到的压缩包，并查看目录结构，Highcharts已将所需文件组织得非常清晰。开发人员需要掌握HTML、CSS和JavaScript的...
这些插件都提供了详细的文档和示例，帮助开发者快速入门并实现所需的功能。 总的来说，Highcharts、jsCharts和Flot都是jQuery生态中优秀的图表解决方案，各有其特点和适用场景。选择哪一个取决于项目的需求，如性能...
6. **chart.html** - 虽然Bootstrap本身不直接支持图表，但这个文件可能包含了与第三方库（如Chart.js或Highcharts）集成的示例，用于在Bootstrap模板中创建动态数据可视化。 7. **empty.html** - 这可能是用于...
### ExtJS 入门文档知识点概述 #### 一、ExtJS 概述 ExtJS 是一款基于 JavaScript 的开源前端框架，主要用于构建复杂的企业级 Web 应用程序。它提供了丰富的 UI 组件库以及数据处理能力，能够帮助开发者快速构建...
3. **Highcharts-3.0.0.zip**：Highcharts是一个流行的开源JavaScript图表库，提供多种类型的图表，如折线图、柱状图、饼图等。版本3.0.0是该库的一个历史版本，可能包含了一些基础的图表绘制功能和API，适合初学者...
**JavaScript可视化快速入门** 在数字化世界中，可视化已经成为数据交流和理解的重要手段。JavaScript，作为浏览器最常用的脚本语言，提供了强大的工具和技术用于创建各种视觉效果。本指南将引导你踏入JavaScript...
入门 安装模块： npm install hssp-curve 一个如何使用组件的简单示例： var hssp_curve = require ( 'hssp-curve' ) ; var instance = new hssp_curve ( { el : yourDiv , data : "/single.xml" } ) ; instance...
- 初始化图表：使用Highchar API的`Highcharts.chart()`方法创建图表，传入图表容器ID和配置对象。 - 更新和响应事件：可以通过API的方法来更新图表，同时可以监听用户的交互事件。 5. **高级特性** - ** ...
Charisma模板包含了多种页面示例，例如登录/注册页面、仪表盘、图标库、表格、图表、表单元素、按钮、通知、进度条等，这些都为开发者提供了一站式的解决方案，无需从零开始创建这些常见的后台元素。此外，模板还...
在JavaScript领域，有许多流行的库和框架用于数据可视化，如D3.js、Chart.js、Highcharts、ECharts等。这些库提供了丰富的API和各种图表类型，如折线图、柱状图、饼图、散点图以及地理地图等。如果"nrpt-krf-可视化...
3. **Highcharts**：Highcharts是一个面向企业的图表库，提供了多种类型的图表，并支持高度的自定义和交互性。它还支持响应式设计，能够在各种设备上良好显示。 4. **ECharts**：ECharts是由百度开发的开源库，支持...
9. **文档和示例**：一个完整的项目通常会包含详细的文档，解释如何使用和配置Widget，以及一些示例代码帮助快速入门。 以上就是"SR-widget-chart"项目可能涉及的关键技术点和知识领域，每个点都可以深入学习，提升...