我有一个带2个窗格的条形图。我想在两个窗格中添加绘图带,但颜色不同。如何才能做到这一点?我想在图表的底部显示类别标签。如何才能做到这一点?
这是jsfiddle的例子:http://jsfiddle.net/An59E/27/
HTML代码:
<div id="chart"></div>
JS代码:
var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [70, 60, -40, 90, 10, 50];
var series4= [-50, 40, 20, -80, 70, 80];
$("#chart").kendoChart({
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series2,
color: "#CCCCCC"
},
{
data: series3,
axis: "bottom" ,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series4,
axis: "bottom" ,
color: "#CCCCCC"
}
],
categoryAxis:
[
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line: {
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
]
},
{
pane: "bottom-pane",
color: "#0099FF",
majorGridLines:
{
visible: true
},
line: {
width: 3,
},
labels:
{
margin:
{
top: 80,
bottom: 0
}
},
categories: [2005, 2006, 2007, 2008, 2009],
}
],
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis: [
{
pane: "top-pane",
title:
{
text: "Availability"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
{
pane: "bottom-pane",
name: "bottom",
title:
{
text: "Occupancy"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
}
],
panes:
[
{
name: "top-pane",
border: {
color: "#C0C0C0",
width: 1
},
},
{
name: "bottom-pane",
border: {
color: "#C0C0C0",
width: 1
}
}
],
tooltip: {
visible: true,
format: "{0}"
}
});
谢谢。
要在两个窗格中添加绘图带:
plotBands: [
{
from: 95,
to: 100,
color: "#2082c8"
//color: "url(#pattern2)",
},
{
from: 125,
to: 130,
color: "#c82020"
}