使用Highcharts制作简单图表
2013-12-04 00:00
423 查看
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧。
放在网页任何地方都可,继续下面的jQuery代码:
上面的代码利用jQuey打开已准备好的代码文件,如果使用MooTools或者Prototype代替 $(function ()语法,会有一点不同。而且,Highcharts在这些框架中并不是一个插件。因此,需要使用 Highcharts.Chart constructor并定义 chart.renderTO进行选择。
如果你嵌入Stock chart,这里有一个单独的构造函数方法——Highcharts.StockChart。在这张图表中图表以在一个单独的JavaScript数组提供,即不来自单独的JavaScript文件也不来自Ajax调用服务器。
步骤一
在网页中添加一个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 ()语法,会有一点不同。而且,Highcharts在这些框架中并不是一个插件。因此,需要使用 Highcharts.Chart constructor并定义 chart.renderTO进行选择。
MooTools
window.addEvent('domready', function() { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' ... });
Prototype
document.observe("dom:loaded", function() { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' ... });
如果你嵌入Stock chart,这里有一个单独的构造函数方法——Highcharts.StockChart。在这张图表中图表以在一个单独的JavaScript数组提供,即不来自单独的JavaScript文件也不来自Ajax调用服务器。
var chart1; // globally available $(function() { chart1 = new Highcharts.StockChart({ chart: { renderTo: 'container' }, rangeSelector: { selected: 1 }, series: [{ name: 'USD to EUR', data: usdtoeur // predefined JavaScript array }] }); });
步骤三
现在我们可以看到展现在网页上的图表:步骤四
这一步可选。你可以为你的图表添加一个主题。通过设置Highcharts.setOptions实现。下载预定义主题,添加以下代码来操作:<script type="text/javascript" src="/js/themes/gray.js"></script>
相关文章推荐
- Highcharts使用教程(1):制作简单图表
- Highcharts图表插件的简单使用说明
- 使用Django Highcharts制作图表
- axure中使用HighCharts模板制作统计图表
- highcharts 图表库的简单使用
- Highcharts图表插件的简单使用说明
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 快速使用MPAndroidChart实现图表制作
- (三)、使用HighCharts创建第一个图表实例
- c#(winform)使用mschart控件制作图表-----问题及解决
- 使用.NET REACTOR使用方法,制作软件许可证,做一个简单的许可证系统步骤
- asp.net使用chart控件简单制作柱状体、饼图总结
- 图表 Echarts 3.0 简单使用
- 使用js制作一个简单的计算器
- 使用echarts简单制作中国地图,echarts中国地图
- Highcharts使用指南,可使用漂亮的按时间滚动数据图表
- (三)、使用HighCharts创建第一个图表实例
- Unity制作简单3D图表
- 百度Echarts图表简单使用
- 使用cocos2d-x3.0和物理引擎制作简单的platformer游戏