Kendo 图表未按预期显示数据

Question

我一直对 kendo 图表有疑问。

从下面的代码片段中，如果您打开 Kendo Dojo 并粘贴它，您会注意到当类别轴包含跨越 4 个月的数据时，它只显示一个月 "Nov"。

此数据在数据源中按符号分组，有 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: "[=11=]",
                        skip: 2,
                        step: 2
                    }
                },
                categoryAxis: {
                    field: "date",
                    labels: {
                        format: "MMM"
                    }
                }
            });
        }

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


</body>
</html>

Answer 1

经过一段时间的调查，我发现了散点图，这正是我想要的。

我最初的工作是使用折线图完成的，但我尝试了散点图并且成功了。

请参阅下面的代码。

<!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: "[=10=]",
                        skip: 2,
                        step: 2
                    }
                },
                xAxis: {
                    labels: {
                        format: "MMM"
                    }
                }
            });
        }

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


</body>
</html>

Kendo 图表未按预期显示数据

Kendo chart not displaying data as expected

html

kendo-ui

kendo-dataviz

kendo-chart