Диаграмма кендо не отображает данные должным образом

У меня возникла проблема с таблицей кендо.

Из фрагмента ниже, если вы откроете Kendo Dojo и вставите его, вы заметите, что ось категорий показывает только один месяц "ноябрь", если он содержит данные за 4 месяца.

Эти данные сгруппированы по символу в источнике данных, и есть 2 группы, группа «2. AAL имеет только одну запись», но если бы я добавил еще одну запись в источник данных с символом «2. AAL», он показывает именно то, что мне нужно но мне кажется, что из-за того, что для этой группы есть только одна запись, она игнорирует другие записи для других месяцев и группы.

С текущими данными я ожидаю получить график за 4 месяца с линией, соединяющей точку символа «2. AAPL», в то время как точка для символа «2. AAL» находится сама по себе. А вот график, отображающий все точки из предоставленных данных.

Пожалуйста, любая помощь будет очень признательна.

Спасибо.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/line-charts/grouped-data">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>
      var datatest = [
     
    {
        "date": "12/30/2011",
        "close": 405,
        "volume": 6414369,
        "open": 403.51,
        "high": 406.28,
        "low": 403.49,
        "symbol": "2. AAPL"
    },
    {
        "date": "11/30/2011",
        "close": 382.2,
        "volume": 14464710,
        "open": 381.29,
        "high": 382.276,
        "low": 378.3,
        "symbol": "2. AAL"
    },
    {
        "date": "10/31/2011",
        "close": 404.78,
        "volume": 13762250,
        "open": 402.42,
        "high": 409.33,
        "low": 401.05,
        "symbol": "2. AAPL"
    },
    {
        "date": "9/30/2011",
        "close": 381.32,
        "volume": 19553550,
        "open": 387.12,
        "high": 388.89,
        "low": 381.18,
        "symbol": "2. AAPL"
    }
      ];
        
        var stocksDataSource = new kendo.data.DataSource({
        data: datatest,

            group: {
                field: "symbol"
            },

            sort: {
                field: "date",
                dir: "asc"
            },

            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        }
                    }
                }
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                title: { text: "Stock Prices" },
                dataSource: stocksDataSource,
                series: [{
                    type: "line",
                    field: "close",
                    name: "#= group.value # (close)"
                }],
                legend: {
                    position: "bottom"
                },
                valueAxis: {
                    labels: {
                        format: "${0}",
                        skip: 2,
                        step: 2
                    }
                },
                categoryAxis: {
                    field: "date",
                    labels: {
                        format: "MMM"
                    }
                }
            });
        }

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


</body>
</html>


html kendo-ui kendo-chart kendo-dataviz
person PeterU    schedule 09.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

После некоторого времени исследований я наткнулся на точечную диаграмму, которая делает именно то, что я хочу.

Моя первоначальная работа была выполнена с использованием линейной диаграммы, но я попробовал диаграмму с разбросанными линиями, и она сработала.

См. код ниже.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/scatter-charts/grouped-data">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>
      var datatest = [
     
    {
        "date": "12/30/2011",
        "close": 450,
        "volume": 6414369,
        "open": 403.51,
        "high": 406.28,
        "low": 403.49,
        "symbol": "2. AAPL"
    },
    {
        "date": "11/30/2011",
        "close": 382.2,
        "volume": 14464710,
        "open": 381.29,
        "high": 382.276,
        "low": 378.3,
        "symbol": "2. AAL"
    },
    {
        "date": "10/31/2011",
        "close": 404.78,
        "volume": 13762250,
        "open": 402.42,
        "high": 409.33,
        "low": 401.05,
        "symbol": "2. AAPL"
    },
    {
        "date": "9/30/2011",
        "close": 350.32,
        "volume": 19553550,
        "open": 387.12,
        "high": 388.89,
        "low": 381.18,
        "symbol": "2. AAPL"
    }
      ];
        
        var stocksDataSource = new kendo.data.DataSource({
        data: datatest,

            group: {
                field: "symbol"
            },

            sort: {
                field: "date",
                dir: "asc"
            },

            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        }
                    }
                }
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                title: { text: "Stock Prices" },
                dataSource: stocksDataSource,
                series: [{
                    type: "scatterLine",
                    xField: "date",
                    yField: "close",
                    name: "#= group.value # (close)"
                }],
                legend: {
                        visible: true,
                        position: "bottom"
                    },
                yAxis: {
                    labels: {
                        format: "${0}",
                        skip: 2,
                        step: 2
                    }
                },
                xAxis: {
                    labels: {
                        format: "MMM"
                    }
                }
            });
        }

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


</body>
</html>

person PeterU    schedule 09.01.2015