我正在使用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>

08-04 16:41