剑道图没有在100％堆积柱形图中绘制所有系列

Question

我正在尝试使用kendo创建100％堆积图表，我在下面的示例中有5个系列，但它只显示2个系列作为堆叠列。在下图中，我们可以看到5个图例，只有2个系列。

实施例

<script>
    function createChart() {
    var categories = [
         "2016/04/13 20:00",
         "2016/04/13 05:00",
         "2016/04/13 01:00",
         "2016/04/13 10:00",
         "2016/04/13 06:00",
         "2016/04/13 19:00",
         "2016/04/13 03:00",
         "2016/04/13 14:00",
         "2016/04/13 23:00",
         "2016/04/13 04:00"]

  var series = [
            { color: "#001400", data: ["2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2"], name: "aa" },
            { color: "#00B400", data: ["3", "3", "3", "3", "3", "3", "3", "3", "3", "3", "3"], name: "bb" },
            { color: "#FFFF00", data: ["4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "4"], name: "cc" },
            { color: "#FF3266", data: ["5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5"], name: "dd" },
            { color: "#FFB4FF", data: ["6", "6", "6", "6", "6", "6", "6", "6", "6", "6", "6"], name: "ee" }
        ]

        $("#chart").kendoChart({
            title: {
                text: "hourly data"
            },
            legend: {
                visible: true,
                position:"bottom"
            },
            seriesDefaults: {
                type: "column",
                stack: {
                    type: "100%"
                }
            },
            series: series,
            valueAxis: {
                line: {
                    visible: true
                },
                minorGridLines: {
                    visible: true
                }
            },
            categoryAxis: {
              labels: { step: 1, rotation: -90 },
                categories: categories,
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    }

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

Answer 1

问题在于，在您的系列中，您的数据是字符串而不是数字。将其更改为：

    var series = [
      { color: "#001400", data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], name: "aa" },
      { color: "#00B400", data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], name: "bb" },
      { color: "#FFFF00", data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], name: "cc" },
      { color: "#FF3266", data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5], name: "dd" },
      { color: "#FFB4FF", data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], name: "ee" }
    ];

的 DEMO