Создание линейного графика кендо с областью минимального и максимального диапазона - PullRequest
Новая
       13

Создание линейного графика кендо с областью минимального и максимального диапазона

0 голосов
/ 05 июня 2018

Есть ли способ создать линейную диаграмму кендо, показывающую изменение цены товаров и минимально-максимальную область (диапазон), рассчитанную на лету?Относительно значений min-max они рассчитываются как среднее арифметическое за последние 5 недель (значение недели может быть вне области диапазона).

Я безуспешно пытался объединить линейную диаграмму и диаграмму области диапазонадля этого, но отображаются только серии линий.Вот как я пытаюсь сделать это статически (позже я попытаюсь получить данные из файла json): 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/line-charts/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>


</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Product price"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                series: [{
                    type: "rangeArea",
                    data: [[5, 11], [5, 13], [7, 15], [10, 17]]
                }], series: [{
                    name: "Product A",
                    data: [7, 16, 13, 12, 10]
                },{
                    name: "Product B",
                    data: [6, 9, 13, 14, 12]
                },{
                    name: "Product C",
                    data: [3, 5, 14, 12, 13]
                }], seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },valueAxis: {
                    labels: {
                        format: "${0:n2}"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: ["Week11", "Week12", "Week13", "Week14", "Week15"],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

Вот как это должно работать

Привет

1 Ответ

0 голосов
/ 06 июня 2018

Серия представляет собой один массив: 

series: [{
        type: "rangeArea",
        data: [[5, 11], [5, 13], [7, 15], [10, 17]]
    },{
        name: "Product A",
        data: [7, 16, 13, 12, 10]
    },{
        name: "Product B",
        data: [6, 9, 13, 14, 12]
    },{
        name: "Product C",
        data: [3, 5, 14, 12, 13]
    }]

DEMO

...