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.