创建具有最小-最大范围区域的 kendo 折线图

Question

有没有办法创建一个 kendo 折线图来显示产品价格变化和动态计算的最小-最大范围区域（带）？关于最小值-最大值，它们被计算为最近 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>

This how it's supposed to work

此致

Answer 1

系列是单个数组：

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

创建具有最小-最大范围区域的 kendo 折线图

Creating a kendo line chart with a min-max range area

javascript

linechart

kendo-ui

kendo-chart