Kendo UI 數據可視化 - 條形圖 - 最小/最大 Y 軸值
[英]Kendo UI Data Vis - Bar Chart - Min/Max Y-Axis Value
問題描述
我正在使用 Kendo UI 的條形圖進行一些數據可視化。
我正在嘗試為 y 軸設置最大值，有誰知道我該如何實現？
目前，這些值似乎是根據我圖表中的值生成的，但我的數據的最大值和最小值需要為 15。
這是正在生成的內容。
我的代碼如下：
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<style>
#dd {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
</style>
<div id="example">
<div class="demo-section k-content">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "What should I call this graph"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "XX",
data: [13.907]
}, {
name: "XX",
data: [-4.743]
}, {
name: "XX",
data: [-7.210]
},{
name: "XX",
data: [9.988]
}],
valueAxis: {
labels: {
format: "#.#"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [2013],
line: {
visible: false
},
labels: {
padding: {top: 165}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
3 個解決方案
解決方案1
2 已采納 2014-06-02 16:56:06
只需將“max: 15, min:-15”添加到您的 valueAxis。 這是您的限制示例
http://trykendoui.telerik.com/EgOs
解決方案2
1 2014-06-02 16:56:32
並回答我自己的問題......
我添加修改了以下代碼： valueAxis: { min: -15, // added this line max: 15, // added this line labels: { format: "#.#" }, line: { visible: false }, axisCrossingValue: 0 },
解決方案3
0 2016-10-26 10:01:16
valueAxis: { max: MaxValue, }
//MaxValue 是包含您的最大值的變量
動態設置劍道折線圖的Y軸最小值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.