您的位置：首页 > 其它

highchart使用

2015-06-16 14:10 162 查看

导入jquery包和highcharts包

<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
//左侧Javascript代码
</script>
</head>

具体到项目中，src的路径是有所不同的；

使用例子

$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
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',   45.0],
['IE',       26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari',    8.5],
['Opera',     6.2],
['Others',   0.7]
]
}]
});
});

常用术语图示

详解含义

chart图表配置部分的字段含义：

title标题

标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。text表示的是标题内容

tooltip数据点提示框

当鼠标划过某点时，以框的形式提示该点的数据，比如该点的值，数据单位等；

其中pointFormat是单个点的格式化字符串

plotOptions 数据点配置

pie表示是饼图，其中allowPointSelect表示允许单击饼块否；dataLabels表示数据描述饼块，color表示字体颜色，connectorColor表示字体和饼图间的连线颜色，enable表示有没有数据描述，format格式化字体输出的形式。

series 数据列

图表上一个或多个数据系列，比如图表中的一条曲线，一个柱形

都会有name和data两个配置项

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航