Highcharts是纯JS进行开发的统计画图工具。看代码：
画饼图：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script src="highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width:100,//图形的大小控制
hight:100
},
colors:[
'red',//第一个颜色，与data里面的顺序是对应的
'blue',//第二个颜色
'yellow'//第三个颜色
],
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 5.0],
['IE', 26.8],
{
name: 'Chrome',//默认在图像上产生分离效果
y: 12.8,
sliced: true,
selected: true
}
]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
画曲线图：
$(function () { $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//X轴可以是字符串或者是数字都行 }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, 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] //Y轴必须是数字，当初开发这个的时候没注意到困扰我好久，气死我了 }] }); });
相关推荐
Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种数据可视化效果，包括饼状图、柱状图和曲线图。这些图表类型是数据分析和展示的常用工具，可以帮助用户直观理解大量复杂数据。 饼状图在数据可视...
jQuery曲线图和饼状图插件是数据可视化的重要工具，它们能够帮助开发者快速创建美观且互动的数据展示，尤其适用于网页应用中。 jQuery曲线图插件通常提供了丰富的功能，包括但不限于以下几点： 1. **动态数据更新*...
本文将详细讲解使用JavaScript实现饼状图、柱状图和曲线图的相关知识点。 首先，饼状图是一种常用于表示部分与整体之间关系的数据图形，每个扇区代表一个类别，其大小与该类别的比例成正比。JavaScript中实现饼状图...
总的来说，jQuery.Highcharts.js为开发人员提供了一种高效且灵活的方式来在网页上展示复杂的数据，无论是单独使用还是结合柱状图、饼状图和曲线图的组合，都能帮助用户更好地理解和解释数据。通过熟练掌握Highcharts...
Highcharts是一个强大的JavaScript图表库，支持多种图表类型，包括上述的柱状图、曲线图、饼状图和仪表盘。它提供了丰富的自定义选项，使得开发者可以根据需求创建出美观且功能齐全的图表。使用Highcharts，你不仅...
在数据分析和可视化领域，曲线图、饼状图和柱状图是三种常用的数据表示方法，它们各有特点，适用于不同的场景。下面将详细讲解这三种图表的用途、实现方式以及如何利用编程语言和库文件来创建它们。 首先，曲线图...
Highcharts 是一个用纯JavaScript编写的一个图表库，HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外...
•支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； •跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a ...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种数据可视化图表，如曲线图、区域图、柱状图、饼状图、散状点图以及综合图表等。这款图表库以其易用性、灵活性和丰富的功能而...
它支持多种图表类型，如散点图、区域图、柱状图、折线图和饼状图等，且具有高度自定义和交互性。下面我们将详细介绍这些图表类型及其在Highcharts中的实现。 1. **散点图（Scatter chart）** 散点图是一种用点表示...
在theme中包含四种js是四种颜色样式，defaultSeriesType:为图表类型属性，主要包含8种，分别为 line折线图, spline曲线图, area填充图, areaspline平滑填充图, column柱状图, bar倒柱状图, pie饼状图 , scatter点位...
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。 // jQuery，注意 Highcharts 4.2 ...
2. 曲线图（Spline Chart）：曲线图是直线图的升级版，通过平滑处理数据点之间的连线，使得数据的变化趋势更加平滑，适用于展示复杂的数据流动。 3. 区域图（Area Chart）：区域图不仅绘制线条，还将线下方的区域...
这通常涉及到使用图表库，如ECharts、Highcharts、D3.js等，来帮助我们创建直观、吸引人的饼状图、柱状图、折线图和雷达图。这些图形能够有效地展示数据，使用户更容易理解和分析信息。 1. **饼状图**：饼状图是...
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。 // jQuery，注意 Highcharts 4.2 ...
Highcharts是一个制作图表...支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼状图、散布图； 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件h
Highcharts 是一个用纯 JavaScript 编写...Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图