highcharts图表
Posted 蜗牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了highcharts图表相关的知识，希望对你有一定的参考价值。
<!--图表例子-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
$(‘#container‘).highcharts({
title: {
text: ‘Monthly Average Temperature‘,
x: -20 //center
},
subtitle: {
text: ‘Source: WorldClimate.com‘,
x: -20
},
xAxis: {
categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘,
‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
},
yAxis: {
title: {
text: ‘Temperature (°C)‘
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080‘
}]
},
tooltip: {
valueSuffix: ‘°C‘
},
legend: {
layout: ‘vertical‘,
align: ‘right‘,
verticalAlign: ‘middle‘,
borderWidth: 0
},
series: [{
name: ‘Tokyo‘,
data: [50, 56.9, 59.5, 64.5, 68.2, 71.5, 75.2, 76.5, 73.3, 68.3, 63.9, 14.6]
}, {
name: ‘New York‘,
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: ‘Berlin‘,
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}]
});
});
</script>
</head>
<body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
<!--/图表例子-->
1、清除图表的右下角水印及右上角菜单
credits: {
enable:false
},
exporting:{
enable:false;
},
2、将图表右侧标注 移动到图表正下方
legend: {
align: ‘center‘, //水平方向位置
verticalAlign: ‘bottom‘, //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
},
左上方
legend: {
align: ‘left‘, //水平方向位置
verticalAlign: ‘top‘, //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
},
正上方
legend: {
align: ‘center‘, //水平方向位置
verticalAlign: ‘top‘, //垂直方向位置
x: 0, //距离x轴的距离
y: 20 //距离Y轴的距离
},
以上是关于highcharts图表的主要内容，如果未能解决你的问题，请参考以下文章
使用 JSON 将数据从 PHP 数组传递到 Highcharts 图表
ajax请求返回Json字符串运用highcharts数据图表展现数据