Установить максимальное значение диаграммы на основе данных диаграммы - PullRequest
Новая
       42

Установить максимальное значение диаграммы на основе данных диаграммы

0 голосов
/ 25 марта 2020

Я использую гистограмму 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: диаграммы на основе данных диаграммы.

в качестве примера

  1. если данные диаграммы самое большое значение > 500, тогда нужно установить максимальное значение диаграммы в 1000,
  2. , если данные диаграммы самое большое значение равно 500> самое большое значение> = 400, тогда нужно установить значение max диаграммы как 600,
  3. если данные диаграммы самое большое значение равно 400> самое большое значение> = 300, тогда необходимо установить значение max диаграммы как 500,

Как это сделать ?

Ответы [ 2 ]

1 голос
/ 25 марта 2020

Попробуйте приведенный ниже скрипт 

let data = [200, 600, 300, 125];
var largestvalue = Math.max.apply(Math, data);
var chart;
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: data
  }],
  valueAxis: {},
  categoryAxis: {
    categories: [2000, 2001, 2002, 2003]
  }
});

var chart = $("#chart").data("kendoChart");        
chart.setOptions({
                 valueAxis: {
                              min: 100,
                              max:  max
                            }
            });

Надеюсь, эта помощь Поиграйте здесь

1 голос
/ 25 марта 2020

Вы можете использовать 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>
...