HighCharts初学____（1）

最新推荐文章于 2024-09-17 08:39:00 发布

置顶

小星_day

最新推荐文章于 2024-09-17 08:39:00 发布

阅读量5.5k

点赞数 4

分类专栏： HighCharts研究学习文章标签： javascript highcharts 图形 js图表

本文链接：https://blog.csdn.net/xingxing1828/article/details/17687275

版权

本文介绍了HighCharts的坐标轴配置，包括Labels的enabled、Formatter、Step和staggerLines，Axis Ticks的属性如tickLength、tickWidth和tickInterval，Axis gridLines的设置，以及linear、logarithmic、datetime和category四种类型的坐标轴。详细讲解了时间轴的Date对象和时间格式化方法。

摘要由CSDN通过智能技术生成

HighCharts初识

1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表

Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。

2、

Highcharts官网：http://www.highcharts.com
Highcharts官网Demo：http://www.highcharts.com/demo
Highcharts官网文档：http://www.highcharts.com/docs
Highcharts官网API：http://api.highcharts.com/highcharts

3、引用HighCharts很简单，仅仅需要引入highCharts的js文件，外加一个框架

本次学习，框架使用的是jQuery.js的框架

4、画出第一个简单的报表图形：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>

<body>
<div id="container" style="width: 400">

</div>

</body>

<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'My Study HighCharts'
},
xAxis: {
categories: ['my', 'first', 'chart']
},
yAxis: {
title: {
text: 'sth'
}
},
series: [{
name: 'Jone',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});

</script>
</html>

效果如下：

若要自定义主题，可阅读相关样式设计的文档

详细分析，HighCharts的组成：

通常，HiighCharts包括这些部分：

标题(Title)，轴（Axis），数据列（Series），数据提示框（Tooltip），图例（Legend），导出功能按钮（Exporting），版权信息（Credits）等

a、Title：

标题。包括 Title 和 Subtitle ，即标题和副标题，其中副标题为非必须的。

title: {
    text: '自定义标题'
},
subtitle: {
    text: '自定义副标题'
}

动态修改Title：

通过HighCharts函数Chart.setTitle()

var chart = new Highcharts.Chart();   //Chart 构造方法
chart.setTitle("自定义标题");

获取Title的值：

var chart = new Highcharts.Chart();   //Chart 构造方法
alert(chart.title.text); 	      //直接通过属性获取值

标题可以设置为，一个链接地址，href属性即可：

因为HighCharts可以解析HTML内容

b、Axis：

最低0.47元/天解锁文章

小星_day

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录