好不容易抽出時間將Jqplot做下最后的總結，下面通過四個例子來學習Jqplot的一些常見技巧：
示例1. 設置線條顏色（包括背景色及線條顏色的批量賦值）
<!DOCTYPE html>
<html>
<head>
<title>Jqplot Testing</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="Chart1" style="height:400px; width:600px;"></div>
<script type="text/javascript" class="code">
$(document).ready(function(){
var d1 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2],[7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
var d2 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1],[7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
var plot1 = $.jqplot('Chart1', [d1, d2], {
grid: {
drawBorder: false,
shadow: false,
//The background color of the whole chart.
background: '#FFFFFF'
},
highlighter: { show: true },
seriesDefaults: {
shadowAlpha: 0.1,
shadowDepth: 2,
fillToZero: true
},
series: [
{
color: 'red',
showMarker: true,
showLine: true,
markerOptions: {
style: 'filledCircle',
size: 8
},
rendererOptions: {
smooth: true
}
},
{
color: 'yellow',
showMarker: true,
showLine: true,
rendererOptions: {
smooth: true,
},
markerOptions: {
style: 'filledSquare',
size: 8
},
}
],
axes: {
xaxis: {
pad: 1.0,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 1.05
}
}
});
});
</script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>
效果演示：
示例2. 線條常見的屬性控制及特點，本例中需要注意一下兩點：
A. 本例定義了兩種顏色，但共有三條線，所以顏色會輪流顯示;
*有時鼠標放在節點上沒有值顯示或線條顏色顯示黑色，有可能是加的顏色Chart無法識別；
B. series: [{ show: true }, { showLine: true, showLabel: false }]
此處需要注意的是如果需要精確控制每條線的顯示，有幾組數據，就要寫幾組屬性控制列表.
<!DOCTYPE html>
<html>
<head>
<title>Jqplot Testing</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="Chart2" style="height:400px; width:600px;"></div>
<script type="text/javascript" class="code">
$(document).ready(function(){
var d1 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2],[7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
var d2 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1],[7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
var d3 = [[0, 2.3], [2, 5], [2, -5], [3, -4.2], [4, 4], [5, -2], [5.5,4.5],[3, 7.1], [6, -2.4], [8, 6], [8, -1], [10, 0.1], [12, 8], [14, 10], [13, -7]];
var colorListForChart2 = ['orange','blue'];
var plot2 = $.jqplot('Chart2', [d1,d2,d3], {
grid: {
drawBorder: false,
shadow: false,
//The background color of the whole chart.
background: '#FFFFFF'
},
highlighter: { show: true },
seriesDefaults: {
shadowAlpha: 0.1,
shadowDepth: 2,
fillToZero: true
},
//總括：和chart1相比，chart2中對chart1的series進行了合並；
//A. The usage of seriesColors;此處定義了兩種顏色，但共有三條線，所以顏色會輪流顯示;
//PS.有時鼠標放在節點上沒有值顯示或線條顏色顯示黑色，有可能是加的顏色Chart無法識別；
seriesColors: colorListForChart2,
//B. series: [{ show: true }, { showLine: true, showLabel: false }]
//此處需要注意的是如果需要精確控制每條線，有幾組數據，就要寫幾組屬性控制列表.
//此處共有三組數據，如果要精確控制每條線的顯示情況，要寫三組屬性控制，如：[{ show: true }, { showLine: true, showLabel: false }，{ showLine: true, showLabel: false }]
series: [
{
showMarker: true,
showLine: true,
markerOptions: {
style: 'filledCircle',
size: 8
},
rendererOptions: {
smooth: true
}
}
],
axes: {
xaxis: {
pad: 1.0,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 1.05
}
}
});
});
</script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>
效果演示：
示例3. 自定義線條節點的顏色：
<!DOCTYPE html>
<html>
<head>
<title>Jqplot Testing</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="Chart1" style="height:400px; width:600px;"></div>
<div id="Chart2" style="height:400px; width:600px;"></div>
<div id="Chart3" style="height:400px; width:600px;"></div>
<script type="text/javascript" class="code">
$(document).ready(function(){
var d11 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2], [7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
var d12 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2], [7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
var d21 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1], [7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
var d22 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1], [7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
var colorListForChart3 = ['yellow','red', 'blue', 'red'];
var plot3 = $.jqplot('Chart3', [d11, d12, d21,d22], {
grid: {
drawBorder: false,
shadow: false,
//The background color of the whole chart.
background: '#FFFFFF'
},
highlighter: { show: true },
seriesDefaults: {
shadowAlpha: 0.1,
shadowDepth: 2,
fillToZero: true
},
seriesColors: colorListForChart3,
series: [
{
showMarker: true,
showLine: true,
markerOptions: {
style: 'filledCircle',
size: 8
},
rendererOptions: {
smooth: true
}
},
{
showMarker: true,
showLine: false,
markerOptions: {
style: 'filledCircle',
size: 8
},
rendererOptions: {
smooth: true
}
},
{
showMarker: true,
showLine: true,
markerOptions: {
style: 'filledCircle',
size: 8
},
rendererOptions: {
smooth: true
}
},
{
showMarker: true,
showLine: false,
markerOptions: {
style: 'filledCircle',
size: 8
},
rendererOptions: {
smooth: true
}
}
],
axes: {
xaxis: {
pad: 1.0,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 1.05
}
}
});
});
</script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>
效果演示：
示例4. Jqplot的實時顯示效果：
關於Jqplot的實時顯示效果，主要是通過setTimeout(JqplotEvent, 1000)來進行調用的，其他邏輯及顯示與以上均保持一致。