JavaScript图表 | 易学教程

FusionCharts的图表类型（有图有真相）

阅读更多关于 FusionCharts的图表类型（有图有真相）

FusionCharts提供了业界最全面的 Javascript图表库，超过90种图表类型，如柱状图，折线图，饼图以及一些高级图表，如漏斗图、金字塔图、Pareto图和变焦折线图等。近日，小编为大家整理了 FusionCharts 的各种图表类型，从普通图表到高级图表，应有尽有，希望大家能一饱眼福。如果你对业务中所使用的图表有特殊要求，慧都也可根据你的需求进行图表可视化定制开发！ FusionCharts柱状图&条形图效果展示 FusionCharts线形图&面积图效果展示 FusionCharts饼图&圆环图效果展示 FusionCharts组合图效果展示 FusionCharts堆栈图效果展示 FusionCharts泡泡图&XY图表效果展示 FusionCharts Pareto图表效果展示 FusionCharts Marimekko图表效果展示来源： oschina 链接： https://my.oschina.net/u/935975/blog/222958

使用JavaScript/HTML5 Charts创建3D柱状图

阅读更多关于使用JavaScript/HTML5 Charts创建3D柱状图

JavaScript/HTML5 Charts 是amCharts下的一款 JS图表控件，它支持多种图表类型和浏览器，是移动图表开发利器。今天为大家介绍一下如何用JavaScript/HTML5 Charts创建简单的 3D柱状图，以下是详细的步骤：创建一个容器我们将这个容器命名为“chartContainer”，参考以下代码： <body> <div id="chartContainer" style="width: 640px; height: 400px;"></div> </body> 引用JavaScript库在HEAD部分，引用amCharts JavaScript库： <script src="js/amcharts.js" type="text/javascript"></script> 添加数据引用一组JavaScript对象： <script type="text/javascript"> var chartData = [{ country: "USA", visits: 4252 }, { country: "China", visits: 1882 }, { country: "Japan", visits: 1809 }, { country: "Germany", visits: 1322 }, { country: "UK",

JavaScript图表的时间解析功能（2）：日期格式化方法

阅读更多关于 JavaScript图表的时间解析功能（2）：日期格式化方法

在上一章内容我们讲解了 amCharts的时间解析功能。今天对这个共鞥进行扩展，在amChart中使用不同方式格式化日期。用不同方式格式化日期你很有可能会使用不同的日期格式，例如：我想要日期数在月份的旁边，第一个年份不以其他格式显示。在上一章，我们说过amCharts JavaSctipt图表的 CategoryAxis有多种日期格式属性（dateFormats）。他们的默认值为： [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN'},{period:'hh',format:'JJ:NN'},{period:'DD',format:'MMM DD'},{period:'WW',format:'MMM DD'},{period:'MM',format:'MMM'},{period:'YYYY',format:'YYYY'}] 为了达到我想要的格式，我们需要修改"MM"（month）和"YYYY"（year），如下： categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:

Highcharts图表结构分析：详解Highcharts基本组成

阅读更多关于 Highcharts图表结构分析：详解Highcharts基本组成

一般情况下，交互图表HighCharts包含 Title-标题、 Axis-轴、 Series-数据系列、 Tooltip-工具提示、 Legend-图例等，每个部分对于位置如下图所示： Title-标题标题包括Title和Subtitle，即标题和副标题，其中副标题为非必须的。 Axis-轴轴包括xAxis和yAxis，即x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴，当然，还可以有两个X轴或Y轴，分别显示在图表的上下或左右。 Series-数据系列数据系列是图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。 Tooltip-工具提示工具提示在鼠标滑过某点时，以框的形式提示改点的数据，比如该点的值，数据单位等。 Legend-图例图例用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列。本文转载至慧都控件网，原作者走猫步的鱼相关教程：使用Highcharts制作简单图表来源： oschina 链接： https://my.oschina.net/u/1163318/blog/186858

Highcharts图表结构分析:详解标题与副标题

阅读更多关于 Highcharts图表结构分析:详解标题与副标题

JavaScript图表 Highcharts 默认，标题显示在图表的头部，可选的副标题显示在其下。标题和副标题内容可以通过如下代码设置 title: { text: '自定义标题' }, subtitle: { text: '自定义副标题' } 关于标题和副标题属性设置Highcharts的官方API文档有详细说明，大家可以点击查看。动态修改Title 通过Highcharts提供的函数 Chart.setTitle()实现对图表标题动态修改。实例用法如下： var chart = new Highcharts.Chart(); //Chart 构造方法 chart.setTitle("自定义标题"); 获取Title值 Highcharts没有提供和setTitle对应的获取标题值的函数，可以通过获取Highcharts属性获得，代码如下： var chart = new Highcharts.Chart(); //Chart 构造方法 alert(chart.title.text); //直接通过属性获取值文章转载自慧都控件网，原作者：走猫步的鱼相关教程：使用Highcharts制作简单图表 ighcharts图表结构分析：详解Highcharts基本组成来源： oschina 链接： https://my.oschina.net/u/1163318/blog

使用Highcharts制作简单图表

阅读更多关于使用Highcharts制作简单图表

今天我们要使用JavaScript图表 Highcharts 制作简单的柱形图，我们已经安装好Highcharts，让我们开始制作图表吧。步骤一在网页中添加一个div。设置id，设置图表长、高。代码如下： <div id="container" style="width:100%; height:400px;"></div> 步骤二添加JavaScript标签初始化图表，放在网页任何地方都可，继续下面的jQuery代码： $(function () { $('#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] }] }); }); 上面的代码利用jQuey打开已准备好的代码文件，如果使用MooTools或者Prototype代替 $(function ()语法，会有一点不同。而且