关于jQchart的用法问题,初学者可看

来源：互联网发布：免费内存卡数据恢复编辑：程序博客网时间：2024/06/06 10:49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Chart
</title>
<link rel="stylesheet" type="text/css"
href="../web/SimpleDemo/jQchartDemo/css/jquery.jqChart.css" />
<script lang="javascript" type="text/javascript">
$(document).ready(function () {

var background = {
type: 'linearGradient',//
x0: 0,
y0: 0,
x1: 0,
y1: 1,
colorStops: [{ offset: 0, color: 'white' }, //表格图片背景色渐变之浅
{ offset: 1, color: '#75cce8' }] // 表格图片背景色渐变之深
};

$('#jqChart').jqChart({

title: { text: '产品销售走向图' }, // 表格标题

//x轴 y轴参数设置
axes : [ { title: { text: ' '},
location : 'left',// y轴位置，取值：left,right
//minimum : 0// y轴刻度最小值
// maximum : 100,// y轴刻度最大
// interval : 10 // 刻度间距
},

{title: { text: ' '},
location : 'bottom',
interval : 1

}],

border: { strokeStyle:'#dbf4fb' }, // 整表格边框色
background: background, //背景色渐变
chartAreaBackground: '#dbf4fb', // 表格背景色
animation: { duration: 2 }, //柱状图动画增长速度

//图标数据和颜色
series: [{
type: 'column', //设置条形图类型
title: '柱状图',
fillStyle: '#fb5410',
data: [['第一季度', 50], ['第二季度', 105], ['第三季度', 40],['第四季度',80]]
},

{
type: 'line',
title: '折线图',
fillStyle: '#418CF0',
data: [['第一季度', 12], ['第二季度', 35], ['第三季度', 7], ['第四季度', 24]]
},

{
type: 'splineArea',
title: '面积图',
fillStyle: '#FCB441',
data: [['第一季度', 8], ['第二季度', 44], ['第三季度', 14], ['第四季度', 78]]
},

{
type: 'pie',
title: '饼状图',
fillStyle: 'green',
data: [['第一季度', 8], ['第二季度', 44], ['第三季度', 14], ['第四季度', 78]]
}],
});
});
</script>


</head>
<body>
<div>
<div id="jqChart" style="width: 795px; height: 450px;">
</div>
</div>
</body>
</html>

0 0