Kendo UI 图表类型 rangeColumn stacked series

Question

我需要创建一个具有堆叠系列的图表类型 rangeColumn。这就是现在的样子。它应该堆叠列。

这是我创建图表的函数：

function createChart() {
    $("#Chart").kendoChart({
        title: {
            text: "Title",
            font: "14px 'Open Sans'",
            color: "#4D4D4D",
            align: "left",
            margin: {
                top: 20,
                bottom: 10
            }
        },
        legend: {
            position: "bottom",
            item: {
                visual: function (e) {
                    var color = e.options.markers.background;
                    var labelColor = e.options.labels.color;
                    var rect = new kendo.geometry.Rect([0, 0], [200, 50]);
                    var layout = new kendo.drawing.Layout(rect, {
                        spacing: 5,
                        alignItems: "left"
                    });
                    var marker = new kendo.drawing.Path({
                        fill: {
                            color: color
                        },
                        stroke: {
                            color: color
                        },
                    }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();
                    var label = new kendo.drawing.Text(e.series.name, [10, 0], {
                        fill: {
                            color: labelColor
                        },
                        font: "14px 'Open Sans'"

                    });

                    layout.append(marker, label);
                    layout.reflow()

                    return layout;
                }
            }
        },
        series: [

            {
            stack: "area",
            type: "rangeColumn",
            color: "#C60C30",                 
            data: [
                [40, 60], [55, 65]
            ]
        },
        {
            type: "rangeColumn",
            color: "rgb(198, 12, 48, 0.55)", 
            data: [
                [30, 38], [44, 54]
            ]
        }
        ],
        seriesDefaults: { 
            overlay: { gradient: "none" },
            border: {
                width: 0,
                color: ""
            },                
            labels: {
                visible: false                    
            }
        },
        categoryAxis: {
            title: {
                text: "Loren ipsum",
                position: "bottom",
                font: "10px Open Sans",
                color: "#4D4D4D"
            },
            categories: ["Loren", "Ipsum"],
            majorGridLines: false,
            labels: {
                rotation: "auto"
            }
        },
        valueAxis: {
            title: {
                text: "Loren ipsum",
                position: "bottom",
                font: "10px Open Sans",
                color: "#4D4D4D"
            },
            min: 0,
            max: 100
        },
        tooltip: {
            visible: true                
        }
    });
}

我尝试了不同类型的方法来堆叠值，例如使用 stack: true 但没有成功。 Telerik 堆栈示例 https://demos.telerik.com/kendo-ui/bar-charts/stacked-bar 这是文档 - 我想我在这里跳过了一些东西。 https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.stack

Answer 1

的确，文档说：

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" or "radarColumn". All series in the stack must be of the same type.

您的类型是"rangeColumn"，不在列表中。

您可以使用 "column" 类型和底部的白色系列来创建从 0 开始的偏移量。

您还可以在 https://www.telerik.com/support/feedback

请求对堆叠 rangeColumn 的支持

Kendo UI 图表类型 rangeColumn stacked series

Kendo UI Chart type rangeColumn stacked series

javascript

kendo-ui

kendo-chart