我有一个Kendo UI图表,其中在3个不同的值轴上显示3个系列的数据。
“广告排名”值轴被反转,其中1为最大可能值(根据图像)。
如您所见,这将导致“广告排名”系列呈现“自上而下”。
有谁知道强迫该系列呈现“自下而上”的方法,例如该栏将从最低值(4.5)开始渲染。
Javascript:
var categories = Array();
var series1 = Array();
var series2 = Array();
var series3 = Array();
// data is populated by parsing a html table
// $chart is passed in as a variable
$chart.kendoChart({
theme: "bootstrap",
title: {
text: "Hour of Day Avg. Position"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line",
},
series: [{
data: series1,
name: "Avg. Ctr",
tooltip: {
visible: true,
template: "#= category #: #= value #%"
},
axis: "ctr"
},
{
type: "bar",
data: series2,
name: "Avg. Position",
tooltip: {
visible: true,
template: "#= category #: #= value # Avg. Pos."
},
axis: "adPos"
},
{
data: series3,
name: "Clicks",
tooltip:
{
visible: true,
template: "#= category #: #= value # Clicks"
},
axis: "clicks"
}],
valueAxes: [
{
title: { text: "Click Through Rate" },
name: "ctr",
labels: {
visible: true,
format: "{0}%"
}
},
{
title: {text: "Clicks per Hour"},
name: "clicks",
labels: {
visible: true,
format: "{0}"
}
},
{
title: { text: "Ad Position" },
name: "adPos",
labels: {
visible: true,
format: "{0}"
},
min: 1,
reverse: true
}],
categoryAxis: {
categories: categories,
labels: {
rotation: 45
},
title: {
text: "Hour of Day (24Hr)"
},
reverse: false,
axisCrossingValues: [0,30]
}
});
最佳答案
不支持此功能,但是我可以通过隐藏轴实现类似的功能。它应该具有相同的范围,但方向是正常的:
series: [{
axis: "hidden"
// ...
}],
valueAxes: [{
reverse: true,
min: 1,
max: 4.5
}, {
visible: false,
name: "hidden",
min: 1,
max: 4.5
}]
请参阅this jsBin以获取有效的演示。
另一种方法是使用烛台系列模拟范围条。这个想法是只对开/低和高/收盘使用一对值。参见演示here。
尽管如此,专用的范围条形图仍将是最佳解决方案。随时对UserVoice进行投票。