我正在使用Kendo条形图表示数据。
我的示例代码如下
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [ {
name: "Example Series",
data: [200, 450, 300, 125]
} ],
valueAxis: {
min:100,
max:600
},
categoryAxis:{
categories: [ 2000, 2001, 2002, 2003 ]
}
});
</script>
目前,我将图表的
max
值设置为max:600
。现在我需要根据图表数据动态设置图表的max:
值。举个例子,
如果图表数据的最大值> 500,则需要将图表的最大值设置为1000,
如果图表数据的最大值为500>最大值> = 400,则需要将图表的
max
值设置为600,如果图表数据的最大值是400>最大值> = 300,则需要将图表的
max
值设置为500,我该怎么做?
最佳答案
您可以使用Math.max()
查找largestvalue
并使用该值确定最大值
var data = [200, 450, 300, 125];
var largestvalue = Math.max(...data);
var max;
if (largestvalue > 500) {
max = 1000;
} else if (largestvalue < 500 && largestvalue >= 400) {
max = 600;
} else if (largestvalue < 400 && largestvalue >= 300) {
max = 500;
}
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [{
name: "Example Series",
data: [200, 450, 300, 125]
}],
valueAxis: {
min: 100,
max: max
},
categoryAxis: {
categories: [2000, 2001, 2002, 2003]
}
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="chart"></div>