Hello World程序
最后更新于:2022-04-01 22:25:55
# Hello World程序
> 本人精通c、c++、java、C#、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal、JavaScript、PHP、ASP等语言的HelloWorld程序编写
新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了。
##### 1、创建div容器
在页面的 body部分创建一个div,并指定div 的 id,高度和宽度,代码如下
```
```
##### 2、编写Highcharts代码
编写Highcharts必须的代码,用<script></script>包裹,代码可以放在页面的任意地方,一个最简单的图表实例代码如下
```
$(function () {
$('#container').highcharts({ //图表展示容器,与div的id保持一致
chart: {
type: 'column' //指定图表的类型,默认是折线图(line)
},
title: {
text: 'My first Highcharts chart' //指定图表标题
},
xAxis: {
categories: ['my', 'first', 'chart'] //指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
}
},
series: [{ //指定数据列
name: 'Jane', //数据列名
data: [1, 0, 4] //数据
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
```
完成上述两个步骤后,保存文件并用浏览器打开,运行结果如下图所示
![Helloworld程序](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-04_572991759479c.jpg)
**图1-5 My first chart**
[在线试一试](http://code.hcharts.cn/hcharts.cn/hhhhWr)
##### 上述例子完整html代码如下 <small>你可以拷贝保存为html文件运行即可看到效果</small>
```
```
至此,我们已经初步了解和学会了自己编写简单的Highcharts图表了,这只是开始,后面的会越来越有趣。
### 如何学习Highcharts
Highcharts的配置(或者说Highcharts代码)是一个`json`字符串,类似于`{chart:{type:"spline"}}`,json具有易于人阅读和编写的特点,所以学习和开发Highcharts并不难,只是熟悉API程度的问题。所以本教程的重点是带大家熟悉API文档加一点点处理技巧,更多的是靠大家花时间学习和实践。
#### 准备知识
* 熟悉Html、jQuery、Json、Ajax等前端知识
* 至少会一种后台语言,例如Php、Java、asp等(Highcharts只是做数据展现,具体的数据来源必须通过动态语言)
#### 几点建议
* 任何东西的掌握必须通过自我实践
* 多看API,Highcharts提供的API文档非常完善,几乎所有的问题都可以在API找到解决办法
* * *
(正文完,最后更新时间:2015-05-22 12:49:19)
';